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,14 +66,33 @@ 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">
+          <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
-            className="my-auto text-3xl hover:cursor-pointer"
               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) => (
@@ -87,34 +105,8 @@ export const NavBar = () => {
               {menuItem.title}
             </Link>
           ))}
-            <Link
-              href={"/search"}
-              key={nanoid()}
-              className="border-b border-dashed p-3 text-xl hover:text-sky-500"
-              onClick={() => setIsSideNavOpen(false)}
-            >
-              {"SEARCH"}
-            </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>
     </Sheet>
   );
 };