updated sidebar

src/components/dashboard/sidebar-theme-toggle.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
+import { ChevronDown, Monitor, Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+export function SidebarThemeToggle() {
+    const { theme, setTheme } = useTheme()
+    const [mounted, setMounted] = useState(false)
+
+    // Prevent hydration mismatch
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return (
+            <SidebarMenu>
+                <SidebarMenuItem>
+                    <SidebarMenuButton disabled tooltip="Theme">
+                        <Sun className="h-4 w-4" />
+                        <span>Theme</span>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        )
+    }
+
+    const getIcon = () => {
+        switch (theme) {
+            case "light":
+                return <Sun className="h-4 w-4" />
+            case "dark":
+                return <Moon className="h-4 w-4" />
+            default:
+                return <Monitor className="h-4 w-4" />
+        }
+    }
+
+    const getThemeLabel = () => {
+        switch (theme) {
+            case "light":
+                return "Light"
+            case "dark":
+                return "Dark"
+            default:
+                return "System"
+        }
+    }
+
+    const cycleTheme = () => {
+        if (theme === "light") {
+            setTheme("dark")
+        } else if (theme === "dark") {
+            setTheme("system")
+        } else {
+            setTheme("light")
+        }
+    }
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            tooltip={`Theme: ${getThemeLabel()}`}
+                            className="pl-4"
+                        >
+                            {getIcon()}
+                            <span>Theme ({getThemeLabel()})</span>
+                            <ChevronDown className="ml-auto h-4 w-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" side="top">
+                        <DropdownMenuItem onClick={() => setTheme("light")}>
+                            <Sun className="h-4 w-4 mr-2" />
+                            Light
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setTheme("dark")}>
+                            <Moon className="h-4 w-4 mr-2" />
+                            Dark
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setTheme("system")}>
+                            <Monitor className="h-4 w-4 mr-2" />
+                            System
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    )
+}

src/components/dashboard/sidebar.tsx

@@ -17,6 +17,7 @@ import {
     SidebarMenuItem,
     useSidebar
 } from "@/components/ui/sidebar"
+import { SidebarThemeToggle } from "./sidebar-theme-toggle"
 import { SidebarUserDropdown } from "./sidebar-user-dropdown"
 
 const items = [
@@ -82,6 +83,7 @@ export function DashboardSidebar() {
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
+                <SidebarThemeToggle />
                 <SidebarUserDropdown />
             </SidebarFooter>
         </Sidebar>