Changed Dashboards

src/components/layout/sidebar.tsx

@@ -42,6 +42,7 @@ interface SidebarProps {
 export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
   const pathname = usePathname()
   const { user } = useUser()
+  if (!user) return null
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   const sidebarContent = (

src/components/layout/topbar.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -35,9 +34,13 @@ interface TopbarProps {
 export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
-  const { user } = useUser()
+  const { user, logout } = useUser()
+  const [mounted, setMounted] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
-  const initials = user.name.split(" ").map((n) => n[0]).join("")
+
+  useEffect(() => { setMounted(true) }, [])
+  if (!user) return null
+  const initials = user.name.split(" ").map((n: string) => n[0]).join("").toUpperCase()
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
@@ -79,7 +82,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
         </Button>
 
         {/* Notifications */}
@@ -142,7 +145,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
               Settings
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-destructive">
+            <DropdownMenuItem className="text-destructive" onClick={logout}>
               <LogOut className="mr-2 h-4 w-4" />
               Log out
             </DropdownMenuItem>
@@ -151,4 +154,4 @@ export function Topbar({ onMenuClick }: TopbarProps) {
       </div>
     </header>
   )
-}
+}