casualroom/apps/fenghuo/web/components/nav-user.tsx

'use client';

import {
	IconDotsVertical,
	IconLogout,
	IconNotification,
	IconUserCircle,
	IconSettings,
	IconShield,
	IconHelp,
	IconMoon,
} from '@tabler/icons-react';
import Link from 'next/link';

import { Avatar, AvatarFallback, AvatarImage } from '@nice/ui/components/avatar';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@nice/ui/components/dropdown-menu';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@nice/ui/components/sidebar';
import { useAuth } from '@/components/providers/auth-provider';
import { toast } from '@nice/ui/components/sonner';
import { useRouter } from 'next/navigation';

interface User {
	id?: string;
	username: string;
	avatar?: string;
	roles?: string[];
	sub?: string;
}

export function NavUser({ user }: { user: User }) {
	const { isMobile } = useSidebar();
	const { logout, isAdmin } = useAuth();
	const router = useRouter();
	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?.avatar} alt={user?.username} />
								<AvatarFallback className="rounded-lg">{user?.username.charAt(0).toUpperCase()}</AvatarFallback>
							</Avatar>
							<div className="grid flex-1 text-left text-sm leading-tight">
								<span className="truncate font-medium">{user?.username}</span>
								<span className="text-muted-foreground truncate text-xs">{user?.username + '@fenghuo.com'}</span>
							</div>
							<IconDotsVertical className="ml-auto size-4" />
						</SidebarMenuButton>
					</DropdownMenuTrigger>
					<DropdownMenuContent
						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
						side={isMobile ? 'bottom' : 'right'}
						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?.avatar} alt={user?.username} />
									<AvatarFallback className="rounded-lg">{user?.username.charAt(0).toUpperCase()}</AvatarFallback>
								</Avatar>
								<div className="grid flex-1 text-left text-sm leading-tight">
									<span className="truncate font-medium">{user?.username}</span>
									<span className="text-muted-foreground truncate text-xs">{user?.username + '@fenghuo.com'}</span>
									{isAdmin() && <span className="text-primary text-xs font-medium"></span>}
								</div>
							</div>
						</DropdownMenuLabel>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem asChild>
								<Link href="/dashboard/user">
									<IconUserCircle />
									个人资料
								</Link>
							</DropdownMenuItem>
							<DropdownMenuItem asChild>
								<Link href="/settings">
									<IconSettings />
									系统设置
								</Link>
							</DropdownMenuItem>
							<DropdownMenuItem asChild>
								<Link href="/notifications">
									<IconNotification />
									通知设置
								</Link>
							</DropdownMenuItem>
							{isAdmin() && (
								<DropdownMenuItem asChild>
									<Link href="/admin">
										<IconShield />
										管理后台
									</Link>
								</DropdownMenuItem>
							)}
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem asChild>
								<Link href="/help">
									<IconHelp />
									帮助中心
								</Link>
							</DropdownMenuItem>
							<DropdownMenuItem>
								<IconMoon />
								深色模式
							</DropdownMenuItem>
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuItem
							className="text-destructive focus:text-destructive"
							onClick={async () => {
								try {
									await logout();
									toast.success('退出登录成功');
									router.push('/auth/login');
								} catch (error) {
									toast.error('退出登录失败');
								}
							}}
						>
							<IconLogout />
							退出登录
						</DropdownMenuItem>
					</DropdownMenuContent>
				</DropdownMenu>
			</SidebarMenuItem>
		</SidebarMenu>
	);
}