Improve the design of the sidebar menu

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

components/utils/NavBar.tsx

@@ -62,7 +62,7 @@ export const NavBar = () => {
             {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
           </div>
         </div>
-        <div className="flex flex-wrap text-3xl space-x-2 sm:hidden">
+        <div className="flex flex-wrap text-3xl sm:hidden">
           <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"
@@ -75,34 +75,36 @@ export const NavBar = () => {
           </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={menuItem.href}
-              key={nanoid()}
-              className="border-b border-dashed p-3 text-xl hover:text-sky-500"
-              onClick={() => setIsSideNavOpen(false)}
-            >
-              {menuItem.title}
-            </Link>
-          ))}
-        </div>
-        <div className="flex justify-end text-3xl">
+      <SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
+        {MenuItems.map((menuItem) => (
           <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"
+            href={menuItem.href}
+            key={nanoid()}
+            className="border-b border-dashed p-3 text-xl hover:text-sky-500"
+            onClick={() => setIsSideNavOpen(false)}
           >
-            <MdSearch />
+            {menuItem.title}
           </Link>
+        ))}
+        <Link
+          title="Search the posts"
+          className="border-b border-dashed p-3 text-xl hover:text-sky-500"
+          href="/search"
+          onClick={() => setIsSideNavOpen(false)}
+        >
+          {"SEARCH"}
+        </Link>
+        <div
+          className="flex text-xl p-3 cursor-pointer border-b border-dashed justify-end hover:text-sky-500"
+          onClick={handleSwitchTheme}
+        >
           <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}
+            className="cursor-pointer mx-1 my-auto rounded-full text-2xl"
           >
             {theme === "light" ? <MdOutlineDarkMode /> : <MdOutlineLightMode />}
           </div>
+          <div className="my-auto">{theme === "light" ? "LIGHT" : "DARK"}</div>
         </div>
       </SheetContent>
     </Sheet>