S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix(ui): Multiple display bugs

Browse Source
This commit is contained in:
web@ppanel
2025-03-08 14:46:20 +07:00
parent 0c907337e1
commit f5d8fd3b65
50 changed files with 84 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/components/user-nav.tsx
+24 -21
View File
@@ -25,40 +25,40 @@ export function UserNav() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex items-center gap-2 rounded-full border bg-background px-2 py-1.5 hover:bg-accent transition-colors duration-200 cursor-pointer">
<Avatar className="h-6 w-6">
<div className='bg-background hover:bg-accent flex cursor-pointer items-center gap-2 rounded-full border px-2 py-1.5 transition-colors duration-200'>
<Avatar className='h-6 w-6'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
className="object-cover"
className='object-cover'
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background font-medium">
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br font-medium'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<span className="text-sm max-w-[40px] sm:max-w-[100px] truncate">
<span className='max-w-[40px] truncate text-sm sm:max-w-[100px]'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</span>
<Icon icon="lucide:chevron-down" className="size-4 text-muted-foreground" />
<Icon icon='lucide:chevron-down' className='text-muted-foreground size-4' />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent forceMount align="end" className="w-64">
<div className="flex items-center justify-start gap-2 p-2">
<Avatar className="h-10 w-10">
<DropdownMenuContent forceMount align='end' className='w-64'>
<div className='flex items-center justify-start gap-2 p-2'>
<Avatar className='h-10 w-10'>
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.avatar ?? ''}
className="object-cover"
className='object-cover'
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background">
<AvatarFallback className='from-primary/90 to-primary text-background bg-gradient-to-br'>
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
<div className="flex flex-col space-y-0.5">
<p className="text-sm font-medium leading-none">
<div className='flex flex-col space-y-0.5'>
<p className='text-sm font-medium leading-none'>
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</p>
<p className="text-xs text-muted-foreground">
<p className='text-muted-foreground text-xs'>
{user?.auth_methods?.[0]?.auth_identifier}
</p>
</div>
@@ -72,11 +72,14 @@ export function UserNav() {
onClick={() => {
router.push(`${item.url}`);
}}
className="flex items-center gap-2 py-2 cursor-pointer"
className='flex cursor-pointer items-center gap-2 py-2'
>
<Icon className="size-4 flex-none text-muted-foreground" icon={item.icon!} />
<span className="flex-grow truncate">{t(item.title)}</span>
<Icon icon="lucide:chevron-right" className="size-4 text-muted-foreground opacity-50" />
<Icon className='text-muted-foreground size-4 flex-none' icon={item.icon!} />
<span className='flex-grow truncate'>{t(item.title)}</span>
<Icon
icon='lucide:chevron-right'
className='text-muted-foreground size-4 opacity-50'
/>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
@@ -87,10 +90,10 @@ export function UserNav() {
Logout();
setUser();
}}
className="flex items-center gap-2 py-2 text-destructive focus:text-destructive cursor-pointer"
className='text-destructive focus:text-destructive flex cursor-pointer items-center gap-2 py-2'
>
<Icon className="size-4 flex-none" icon="uil:exit" />
<span className="flex-grow">{t('logout')}</span>
<Icon className='size-4 flex-none' icon='uil:exit' />
<span className='flex-grow'>{t('logout')}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>