added toggle switch to change theme

FrontendFreaks · Oct 1, 2023 · 722eab0 · 722eab0
1 parent cd45621
commit 722eab0
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
@@ -9,7 +9,7 @@ type Props = {};
 export default function SiteHeader({}: Props) {
   return (
     <header className="sticky top-0 z-40 w-full bg-background/95 backdrop-blur p-3">
-      <div className="container flex h-14 items-center md:gap-6 gap-14 md:px-8 px-0">
+      <div className="container flex h-14 items-center md:gap-6 gap-9 md:px-8 px-0">
         <MainNav items={navConfig} />
         <ModeToggle />
         <a href="https://discord.com/invite/vee94km4Wh" target="_blank">

diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
@@ -5,36 +5,41 @@ import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 export function ModeToggle() {
-  const { setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const isDarkMode = resolvedTheme === "dark";
+
+  const toggleTheme = () => {
+    setTheme(isDarkMode ? "light" : "dark");
+  };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild className="h-8 px-1.5 py-4">
-        <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <Button
+        variant="outline"
+        className="px-2 rounded-full"
+        onClick={toggleTheme}
+      >
+        <div className="flex items-center">
+          {isDarkMode ? (
+            <>
+              <SunIcon className="h-[1.2rem] w-[1.2rem]" />
+              <div
+                className={`w-5 h-5 ml-1 mr-1 rounded-full shadow-[0_0_4px_0px_rgba(0,0,0,0.3)] transform translate-x-1 bg-white dark:bg-gray-600 transition-all`}
+              />
+            </>
+          ) : (
+            <>
+              <div
+                className={`w-5 h-5 rounded-full shadow-[0_0_4px_0px_rgba(0,0,0,0.3)] transform translate-x-0 bg-white dark:bg-gray-600 transition-transform`}
+              />
+              <MoonIcon className="h-[1.2rem] w-[1.2rem] ml-2" />
+            </>
+          )}
+        </div>
+      </Button>
+    </>
   );
 }