67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
'use client';
|
|
import { ChevronUp } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import { type User } from 'next-auth';
|
|
import { signOut } from 'next-auth/react';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
|
|
export function SidebarUserNav({ user }: { user: User }) {
|
|
const { setTheme, theme } = useTheme();
|
|
return (
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10">
|
|
<Image
|
|
src={`https://avatar.vercel.sh/${user.email}`}
|
|
alt={user.email ?? 'User Avatar'}
|
|
width={24}
|
|
height={24}
|
|
className="rounded-full"
|
|
/>
|
|
<span>{user?.email}</span>
|
|
<ChevronUp className="ml-auto" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
side="top"
|
|
className="w-[--radix-popper-anchor-width]"
|
|
>
|
|
<DropdownMenuItem
|
|
onSelect={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
>
|
|
{`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<button
|
|
className="w-full "
|
|
onClick={() => {
|
|
signOut({
|
|
redirectTo: '/',
|
|
});
|
|
}}
|
|
>
|
|
Sign out
|
|
</button>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
);
|
|
}
|