From 0ab1b1b9cefd011e1621f7859f15e989001db1a8 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Mon, 8 Jan 2024 20:09:40 +0800
Subject: [PATCH] Improve the design of the sidebar menu

---
 components/ui/switch.tsx    | 29 +++++++++++++++++
 components/utils/NavBar.tsx | 44 +++++++++++++------------
 package-lock.json           | 65 +++++++++++++++++++++++++++++++++++++
 package.json                |  1 +
 4 files changed, 118 insertions(+), 21 deletions(-)
 create mode 100644 components/ui/switch.tsx

diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..4b6c039
--- /dev/null
+++ b/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 };
diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index 3fe020e..3b1ea9b 100644
--- a/components/utils/NavBar.tsx
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 0709351..c7acffd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-toast": "^1.1.5",
         "@vercel/analytics": "^1.1.1",
         "@vercel/speed-insights": "^1.0.2",
@@ -1300,6 +1301,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toast": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
@@ -1404,6 +1434,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-visually-hidden": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
diff --git a/package.json b/package.json
index 599d8fc..e426185 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@vercel/analytics": "^1.1.1",
     "@vercel/speed-insights": "^1.0.2",