panel-web/apps/user/components/user-nav.tsx

'use client';

import useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common';
import { useSidebar } from '@workspace/airo-ui/components/sidebar';
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();
  const { toggleSidebar } = useSidebar();
  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-[34px] w-[34px] sm:h-[52px] sm: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-[28px] font-bold sm:text-[40px]'>
                  {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
                </AvatarFallback>
              </Avatar>
              <div className='flex flex-1 items-center justify-between text-xs sm:text-base'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </div>
              <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
            </div>
          ) : (
            <Avatar className='h-14 w-14 cursor-pointer sm:h-16 sm:w-16'>
              <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='flex w-64 flex-col gap-1 rounded-[42px] p-3 sm:gap-3'
        >
          <div className='flex items-center justify-start gap-2 rounded-full bg-[#EAEAEA] p-1'>
            <Avatar className='h-[34px] w-[34px] sm:h-[52px] sm: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-[18px] font-bold sm:text-2xl'>
                {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
              </AvatarFallback>
            </Avatar>
            <div className='flex flex-col space-y-0.5'>
              <p className='text-xs font-medium leading-none sm:text-xl'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </p>
              <p className='text-muted-foreground text-[10px] sm: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;
                toggleSidebar();
                router.push(`${item.url}`);
              }}
              className='flex cursor-pointer items-center gap-3 rounded-full px-5 py-2 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white sm:text-xl'
            >
              <Icon className='!size-4 flex-none sm:!size-6' 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-base font-medium text-[#0F2C53] focus:bg-[#E22C2E] focus:text-white sm:text-xl'
          >
            <Icon className='!size-4 flex-none sm:!size-6' icon='uil:exit' />
            <span className='flex-grow'>{t('logout')}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }
}