133 lines
5.3 KiB
TypeScript
133 lines
5.3 KiB
TypeScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar"
|
|
import { signOut, useSession } from "@/lib/auth/auth-client"
|
|
import { LogOut, Settings, User } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
|
|
export function SidebarUserDropdown() {
|
|
const { data: session, isPending } = useSession()
|
|
const { state } = useSidebar()
|
|
const router = useRouter()
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await signOut({
|
|
fetchOptions: {
|
|
onSuccess: () => {
|
|
router.push("/")
|
|
}
|
|
}
|
|
})
|
|
} catch (err) {
|
|
console.error("Failed to sign out:", err)
|
|
}
|
|
}
|
|
|
|
if (isPending) {
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton disabled>
|
|
<User />
|
|
<span>Loading...</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
)
|
|
}
|
|
|
|
if (!session?.user) {
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild>
|
|
<Link href="/sign-in">
|
|
<User />
|
|
<span>Sign in</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
)
|
|
}
|
|
|
|
const user = session.user
|
|
const userInitials = user.name
|
|
? user.name.split(" ").map(n => n[0]).join("").toUpperCase()
|
|
: user.email?.[0]?.toUpperCase() || "U"
|
|
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
>
|
|
<Avatar className="h-8 w-8 rounded-lg">
|
|
<AvatarImage src={user.image || undefined} alt={user.name || "User"} />
|
|
<AvatarFallback className="rounded-lg">{userInitials}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">
|
|
{user.name || "User"}
|
|
</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
|
side={state === "collapsed" ? "right" : "bottom"}
|
|
align="end"
|
|
sideOffset={4}
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar className="h-8 w-8 rounded-lg">
|
|
<AvatarImage src={user.image || undefined} alt={user.name || "User"} />
|
|
<AvatarFallback className="rounded-lg">{userInitials}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">
|
|
{user.name || "User"}
|
|
</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
<span>Settings</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleSignOut}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>Log out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
)
|
|
}
|