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 { useSidebar } from '@workspace/airo-ui/components/sidebar';
import { useIsMobile } from '@workspace/airo-ui/hooks/use-mobile';
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();
  const isMobile = useIsMobile();
  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] md:h-[52px] md: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 md:text-[40px]'>
                  {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
                </AvatarFallback>
              </Avatar>
              <div className='flex flex-1 items-center justify-between text-xs md: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 md:h-16 md: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' ? (isMobile ? 'top' : 'right') : undefined}
          className='flex w-[var(--sidebar-width)] flex-col gap-1 rounded-[42px] border-0 bg-transparent pl-[26px] pr-4 shadow-none md:w-64 md:gap-3 md:border md:bg-white md:p-3 md:shadow-md'
          style={{
            '--sidebar-width': '14rem',
          }}
        >
          <div className='flex items-center justify-start gap-2 rounded-full bg-white p-1 md:bg-[#EAEAEA]'>
            <Avatar className='h-[34px] w-[34px] md:h-[52px] md: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 md: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 md:text-xl'>
                {user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
              </p>
              <p className='text-muted-foreground text-[10px] md:text-xs'>
                {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 text-base font-medium focus:bg-[#0F2C53] focus:text-white data-[active=true]:bg-[#0F2C53] data-[active=true]:text-white md:text-xl'
            >
              <SvgIcon className='!size-4 flex-none md:!size-6' 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 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-xl md:text-[#0F2C53]'
          >
            <SvgIcon
              className='!size-4 flex-none md:!size-6'
              width='99'
              height='100'
              name={'exit'}
            />
            <span className='flex-grow'>{t('logout')}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  }
}