dev.2ha.me/lixiyu-net
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Reorganized night mode, search and menu buttons

Browse Source
This commit is contained in:
PrinOrange
2024-01-06 15:02:41 +08:00
parent bac6a044a0
commit 88f1261ca6
1 changed files with 37 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
components/utils/NavBar.tsx
View File

@@ -33,10 +33,10 @@ export const NavBar = () => {
return (
<Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
<nav className="sticky top-0 z-50 flex justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-black/50">
<Link href="/" className="cursor-pointer">
<h1
className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-2xl font-bold dark:border-b-white`}
className={`${fontFangZhengXiaoBiaoSongCN.className} my-auto border-b-4 border-b-black text-xl font-bold dark:border-b-white`}
>
{Config.SiteTitle}
</h1>
@@ -54,7 +54,6 @@ export const NavBar = () => {
))}
<Link
href={"/search"}
key={nanoid()}
className="cursor-pointer mx-2 rounded-full p-1 text-3xl text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
>
<MdSearch />
@@ -67,54 +66,47 @@ export const NavBar = () => {
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
</div>
<SheetTrigger title="Spread the navigation menu" className="sm:hidden">
<MdMenu
className="my-auto text-3xl hover:cursor-pointer"
onClick={() => {
setIsSideNavOpen(!isSideNavOpen);
}}
/>
</SheetTrigger>
<SheetContent className="bg:white border-none shadow-md dark:bg-black">
<div className="my-5 flex flex-col">
{MenuItems.map((menuItem) => (
<Link
href={menuItem.href}
key={nanoid()}
className="border-b border-dashed p-3 text-xl hover:text-sky-500"
onClick={() => setIsSideNavOpen(false)}
>
{menuItem.title}
</Link>
))}
<div className="flex flex-wrap text-3xl space-x-2 sm:hidden">
<Link
title="Search the posts"
className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
href="/search"
>
<MdSearch />
</Link>
<div
title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
onClick={handleSwitchTheme}
>
{theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
</div>
<SheetTrigger
title="Spread the navigation menu"
className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
>
<MdMenu
onClick={() => {
setIsSideNavOpen(!isSideNavOpen);
}}
/>
</SheetTrigger>
</div>
</nav>
<SheetContent className="bg:white border-none shadow-md dark:bg-black">
<div className="my-5 flex flex-col">
{MenuItems.map((menuItem) => (
<Link
href={"/search"}
href={menuItem.href}
key={nanoid()}
className="border-b border-dashed p-3 text-xl hover:text-sky-500"
onClick={() => setIsSideNavOpen(false)}
>
{"SEARCH"}
{menuItem.title}
</Link>
<div
title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
className="cursor-pointer m-2 rounded-full p-1 text-xl text-black dark:text-gray-50"
onClick={handleSwitchTheme}
>
{theme === "light" ? (
<div className="flex">
{"DARK MODE"}
<MdOutlineDarkMode className="mx-2 my-auto" />
</div>
) : (
<div className="flex">
{"LIGHT MODE"}
<MdOutlineLightMode className="mx-2 my-auto" />
</div>
)}
</div>
</div>
</SheetContent>
</nav>
))}
</div>
</SheetContent>
</Sheet>
);
};