116 lines
4.7 KiB
TypeScript
116 lines
4.7 KiB
TypeScript
'use client';
|
|
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { Logout } from '@/utils/common';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@workspace/ui/components/dropdown-menu';
|
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
|
import { useTranslations } from 'next-intl';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
|
|
export function UserNav({ from = '' }: { from?: string }) {
|
|
const t = useTranslations('menu');
|
|
const { user, setUser } = useGlobalStore();
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
if (user) {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
{from === 'profile' ? (
|
|
<div className='mb-3 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-1 pr-6'>
|
|
<Avatar className='h-[52px] w-[52px]'>
|
|
<AvatarImage
|
|
alt={user?.avatar ?? ''}
|
|
src={user?.avatar ?? ''}
|
|
className='object-cover'
|
|
/>
|
|
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[40px] font-bold'>
|
|
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className='flex flex-1 items-center justify-between'>
|
|
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
|
|
</div>
|
|
<Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
|
|
</div>
|
|
) : (
|
|
<Avatar className='h-16 w-16 cursor-pointer'>
|
|
<AvatarImage
|
|
alt={user?.avatar ?? ''}
|
|
src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
|
|
className='object-cover'
|
|
/>
|
|
<AvatarFallback className='text-background bg-[#0F2C53] bg-gradient-to-br text-5xl font-bold'>
|
|
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
forceMount
|
|
align='end'
|
|
side={from === 'profile' ? 'right' : undefined}
|
|
className='w-64 gap-3 rounded-[42px] p-3'
|
|
>
|
|
<div className='mb-3 flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
|
|
<Avatar className='h-[52px] w-[52px]'>
|
|
<AvatarImage
|
|
alt={user?.avatar ?? ''}
|
|
src={user?.avatar ?? ''}
|
|
className='object-cover'
|
|
/>
|
|
<AvatarFallback className='to-primary text-background bg-[#225BA9] bg-gradient-to-br text-2xl font-bold'>
|
|
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className='flex flex-col space-y-0.5'>
|
|
<p className='text-xl font-medium leading-none'>
|
|
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
|
|
</p>
|
|
<p className='text-muted-foreground text-xs'>
|
|
{user?.auth_methods?.[0]?.auth_identifier}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{[
|
|
{
|
|
title: 'profile',
|
|
url: '/profile',
|
|
icon: 'uil:dashboard',
|
|
},
|
|
].map((item) => (
|
|
<DropdownMenuItem
|
|
key={item.title}
|
|
data-active={pathname === item.url}
|
|
onClick={() => {
|
|
if (pathname === item.url) return;
|
|
router.push(`${item.url}`);
|
|
}}
|
|
className='mb-3 flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white'
|
|
>
|
|
<Icon className='!size-6 flex-none' icon={item.icon!} />
|
|
<span className='flex-grow truncate'>{t(item.title)}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
Logout();
|
|
setUser();
|
|
}}
|
|
className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-xl font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white'
|
|
>
|
|
<Icon className='!size-6 flex-none' icon='uil:exit' />
|
|
<span className='flex-grow'>{t('logout')}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
}
|