From 8bf79e3646fc75e7dcf0e6475d18abd3be344fd3 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sat, 3 Oct 2026 09:53:20 +0330
Subject: [PATCH] feat: add theme toggle to mobile profile menu

---
 src/components/ModeToggle.tsx | 54 +++++++++++++++++++++++++++++------
 src/components/Navbar.tsx     |  9 +++---
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
index aff11ce..9e69b7d 100644
--- a/src/components/ModeToggle.tsx
+++ b/src/components/ModeToggle.tsx
@@ -1,21 +1,57 @@
 import { Button } from "@/components/ui/button";
+import { DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu";
 import { useTheme } from "@/components/ThemeProvider";
 import { cn } from "@/lib/utils";
 import { Moon, Sun } from "lucide-react";
 
-export default function ModeToggle({ className }: { className?: string }) {
-  const { theme, setTheme } = useTheme();
+type ModeToggleProps = {
+  className?: string;
+  variant?: "icon" | "menu";
+};
+
+export default function ModeToggle({ className, variant = "icon" }: ModeToggleProps) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const isDark = resolvedTheme === "dark" || theme === "dark";
 
   const handleToggle = () => {
-    if (theme === "system" && typeof window !== "undefined") {
-      const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
-      setTheme(prefersDark ? "light" : "dark");
-      return;
-    }
-
-    setTheme(theme === "dark" ? "light" : "dark");
+    setTheme(isDark ? "light" : "dark");
   };
 
+  if (variant === "menu") {
+    return (
+      <DropdownMenuCheckboxItem
+        checked={isDark}
+        onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
+        onSelect={(event) => event.preventDefault()}
+        className={cn(
+          "my-1 justify-between gap-3 rounded-xl px-3 py-3 text-foreground focus:bg-secondary focus:text-foreground [&>span:first-child]:hidden",
+          className,
+        )}
+        aria-label="حالت نمایش"
+      >
+        <span className="flex items-center gap-2">
+          {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+          <span>حالت نمایش</span>
+        </span>
+        <span
+          dir="ltr"
+          aria-hidden="true"
+          className={cn(
+            "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors",
+            isDark ? "bg-primary" : "bg-input",
+          )}
+        >
+          <span
+            className={cn(
+              "block h-5 w-5 rounded-full bg-background shadow transition-transform",
+              isDark ? "translate-x-5" : "translate-x-0",
+            )}
+          />
+        </span>
+      </DropdownMenuCheckboxItem>
+    );
+  }
+
   return (
     <Button
       variant="ghost"
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7f47fce..5570ac1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -88,22 +88,23 @@ function ProfileAvatarMenu() {
           {[user?.first_name, user?.last_name].filter(Boolean).join(" ") || user?.username || "حساب کاربری"}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl transition-colors hover:bg-secondary hover:text-foreground focus:bg-secondary focus:text-foreground">
+        <DropdownMenuItem asChild className="my-1 flex-row-reverse justify-end gap-2 rounded-xl py-3 transition-colors hover:bg-secondary hover:text-foreground focus:bg-secondary focus:text-foreground">
           <Link to="/profile">
             مشاهده پروفایل
             <UserRound className="h-4 w-4" />
           </Link>
         </DropdownMenuItem>
         {isAdminUser ? (
-          <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl transition-colors hover:bg-secondary hover:text-foreground focus:bg-secondary focus:text-foreground">
+          <DropdownMenuItem asChild className="my-1 flex-row-reverse justify-end gap-2 rounded-xl py-3 transition-colors hover:bg-secondary hover:text-foreground focus:bg-secondary focus:text-foreground">
             <Link to="/admin">
               داشبورد مدیریت
               <LayoutDashboard className="h-4 w-4" />
             </Link>
           </DropdownMenuItem>
         ) : null}
+        <ModeToggle variant="menu" className="md:hidden" />
         <DropdownMenuSeparator />
-        <DropdownMenuItem asChild className="flex-row-reverse justify-end gap-2 rounded-xl text-destructive transition-colors hover:bg-secondary hover:text-destructive focus:bg-secondary focus:text-destructive dark:text-red-300 dark:hover:text-red-200 dark:focus:text-red-200">
+        <DropdownMenuItem asChild className="my-1 flex-row-reverse justify-end gap-2 rounded-xl py-3 text-destructive transition-colors hover:bg-secondary hover:text-destructive focus:bg-secondary focus:text-destructive dark:text-red-300 dark:hover:text-red-200 dark:focus:text-red-200">
           <Link to="/logout">
             خروج از حساب
             <LogOut className="h-4 w-4" />
@@ -157,7 +158,7 @@ export default function Navbar({ siteContent }: { siteContent: SiteContent }) {
 
           <div className="flex items-center gap-2 md:hidden">
             {isAuthenticated ? <NotificationsBell /> : null}
-            <ModeToggle />
+            {!isAuthenticated ? <ModeToggle /> : null}
             <ProfileAvatarMenu />
           </div>
         </div>