Improve the design of the sidebar menu

2024-01-08 20:09:40 +08:00
parent b10ce77b00
commit 0ab1b1b9ce
4 changed files with 118 additions and 21 deletions
--- a/components/ui/switch.tsx
+++ 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 };
--- 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>
--- 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",
--- 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",