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

'use client';

import SvgIcon from '@/components/SvgIcon.tsx';
import useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common';
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/airo-ui/components/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@workspace/airo-ui/components/dropdown-menu';
import { useSidebar } from '@workspace/airo-ui/components/sidebar';
import { Icon } from '@workspace/airo-ui/custom-components/icon';
import { useIsMobile } from '@workspace/airo-ui/hooks/use-mobile';
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();
  const isMobile = useIsMobile();
  if (user) {
    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          {from === 'profile' ? (
            <div className={'pb-3'}>
              <div className='flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
                <Avatar className='h-[34px] w-[34px]'>
                  <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 md:text-[27px]'>
                    {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
                  </AvatarFallback>
                </Avatar>
                <div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
                  {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
                </div>
                <Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
              </div>
            </div>
          ) : (
            <Avatar className='aspect-square h-full w-auto 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-[32px] font-bold leading-none'>
                {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
              </AvatarFallback>
            </Avatar>
          )}
        </DropdownMenuTrigger>
        <DropdownMenuContent
          forceMount
          align='end'
          side={from === 'profile' ? (isMobile ? 'top' : 'right') : undefined}
          className='mt-[1px] flex w-[var(--sidebar-width)] flex-col gap-1 rounded-[28px] border-0 bg-transparent p-0 pl-[26px] pr-4 shadow-none md:w-48 md:gap-3 md:border md:bg-white md:p-3'
          style={{
            '--sidebar-width': '14rem',
          }}
        >
          <div className='flex items-center justify-start gap-2 rounded-full bg-white p-[3px] md:bg-[#EAEAEA]'>
            <Avatar className='h-[34px] w-[34px]'>
              <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 md:text-2xl'>
                {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
              </AvatarFallback>
            </Avatar>
            <div className='flex flex-col'>
              <p className='text-xs font-medium leading-none md:text-sm'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </p>
              <p className='text-muted-foreground text-[10px]'>
                {user?.auth_methods?.[0]?.auth_identifier}
              </p>
            </div>
          </div>
          {[
            {
              title: 'profile',
              url: '/profile',
              icon: 'profile',
            },
          ].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 bg-white px-5 py-2.5 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white md:text-sm'
            >
              <SvgIcon className='!size-4 flex-none' name={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 bg-[#E22C2E] px-5 py-2.5 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-sm md:text-[#0F2C53]'
          >
            <SvgIcon className='!size-4 flex-none' width='99' height='100' name={'exit'} />
            <span className='flex-grow'>{t('logout')}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }
}