From 47bd449fbe50a7b423db860ee6a34a7a3f7c3bb4 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 23 Mar 2024 14:33:28 +0000
Subject: feature(web): Add dark mode support

---
 .../dashboard/sidebar/SidebarProfileOptions.tsx    | 29 +++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx')

diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
index f931b63e..bf56b805 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
@@ -7,8 +7,32 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, MoreHorizontal } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { LogOut, Moon, MoreHorizontal, Sun } from "lucide-react";
 import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+
+function DarkModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  let comp;
+  if (theme == "dark") {
+    comp = (
+      <button onClick={() => setTheme("light")}>
+        <Sun className="size-4" />
+        <p>Light Mode</p>
+      </button>
+    );
+  } else {
+    comp = (
+      <button onClick={() => setTheme("dark")}>
+        <Moon className="size-4" />
+        <p>Dark Mode</p>
+      </button>
+    );
+  }
+  return <Slot className="flex flex-row gap-2">{comp}</Slot>;
+}
 
 export default function SidebarProfileOptions() {
   return (
@@ -19,6 +43,9 @@ export default function SidebarProfileOptions() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem>
+          <DarkModeToggle />
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() =>
             signOut({
-- 
cgit v1.2.3-70-g09d2