From 5ab6c3304b4a2d055767b8195fac9c9eec776d16 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 9 Apr 2024 16:32:41 +0100
Subject: fix(web): Fix the toggle theme button allowing clicks from anywhere
 in the dropdown item

---
 .../components/dashboard/sidebar/SidebarProfileOptions.tsx | 14 ++++++++------
 apps/web/components/theme-provider.tsx                     | 11 ++++++++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
index bf56b805..3fe4d52f 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useToggleTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -13,28 +14,29 @@ import { signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
 
 function DarkModeToggle() {
-  const { theme, setTheme } = useTheme();
+  const { theme } = useTheme();
 
   let comp;
   if (theme == "dark") {
     comp = (
-      <button onClick={() => setTheme("light")}>
+      <span>
         <Sun className="size-4" />
         <p>Light Mode</p>
-      </button>
+      </span>
     );
   } else {
     comp = (
-      <button onClick={() => setTheme("dark")}>
+      <span>
         <Moon className="size-4" />
         <p>Dark Mode</p>
-      </button>
+      </span>
     );
   }
   return <Slot className="flex flex-row gap-2">{comp}</Slot>;
 }
 
 export default function SidebarProfileOptions() {
+  const toggleTheme = useToggleTheme();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -43,7 +45,7 @@ export default function SidebarProfileOptions() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
-        <DropdownMenuItem>
+        <DropdownMenuItem onClick={toggleTheme}>
           <DarkModeToggle />
         </DropdownMenuItem>
         <DropdownMenuItem
diff --git a/apps/web/components/theme-provider.tsx b/apps/web/components/theme-provider.tsx
index 8efcd93b..737e1356 100644
--- a/apps/web/components/theme-provider.tsx
+++ b/apps/web/components/theme-provider.tsx
@@ -2,8 +2,17 @@
 
 import type { ThemeProviderProps } from "next-themes/dist/types";
 import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+
+export function useToggleTheme() {
+  const { theme, setTheme } = useTheme();
+  if (theme == "dark") {
+    return () => setTheme("light");
+  } else {
+    return () => setTheme("dark");
+  }
+}
-- 
cgit v1.2.3-70-g09d2