Reorganized night mode, search and menu buttons

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">
+        <div className="flex flex-wrap text-3xl space-x-2 sm:hidden">
-          <MdMenu
+          <Link
-            className="my-auto text-3xl hover:cursor-pointer"
+            title="Search the posts"
-            onClick={() => {
+            className="my-auto rounded-full p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
-              setIsSideNavOpen(!isSideNavOpen);
+            href="/search"
-            }}
+          >
-          />
+            <MdSearch />
-        </SheetTrigger>
+          </Link>
-        <SheetContent className="bg:white border-none shadow-md dark:bg-black">
+          <div
-          <div className="my-5 flex flex-col">
+            title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
-            {MenuItems.map((menuItem) => (
+            className="cursor-pointer rounded-full my-auto p-1 text-black hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
-              <Link
+            onClick={handleSwitchTheme}
-                href={menuItem.href}
+          >
-                key={nanoid()}
+            {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
-                className="border-b border-dashed p-3 text-xl hover:text-sky-500"
+          </div>
-                onClick={() => setIsSideNavOpen(false)}
+          <SheetTrigger
-              >
+            title="Spread the navigation menu"
-                {menuItem.title}
+            className="text-black rounded-full p-1 hover:bg-gray-200 dark:text-gray-50 dark:hover:bg-gray-800"
-              </Link>
+          >
-            ))}
+            <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"}
+        </div>
-              className="cursor-pointer m-2 rounded-full p-1 text-xl text-black dark:text-gray-50"
+      </SheetContent>
-              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>
     </Sheet>
   );
 };