From 88f1261ca62e5e5147c595542cd2672cd48dae23 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Sat, 6 Jan 2024 15:02:41 +0800
Subject: [PATCH] Reorganized night mode, search and menu buttons

---
 components/utils/NavBar.tsx | 82 +++++++++++++++++--------------------
 1 file changed, 37 insertions(+), 45 deletions(-)

diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index 907ca8c..fb750d3 100644
--- a/components/utils/NavBar.tsx
+++ b/components/utils/NavBar.tsx
@@ -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>
   );
 };