38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { usePage } from '@inertiajs/react';
|
|
import { ChevronsUpDown } from 'lucide-react';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { UserInfo } from '@/components/user-info';
|
|
import { UserMenuContent } from '@/components/user-menu-content';
|
|
|
|
export function NavUser() {
|
|
const { auth } = usePage().props;
|
|
|
|
if (!auth.user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
|
|
data-test="header-user-menu-button"
|
|
>
|
|
<UserInfo user={auth.user} />
|
|
<ChevronsUpDown className="ml-auto size-4" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-56 rounded-lg"
|
|
align="end"
|
|
>
|
|
<UserMenuContent user={auth.user} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|