Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-06 11:40:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

♻️ refactor: Enhance user navigation dropdown ui and styling

Browse Source
This commit is contained in:
turbolnk 2025-03-06 09:34:39 +08:00
parent f17bf8db6e
commit d2732e650b
1 changed files with 38 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
apps/user/components/user-nav.tsx
View File

@ -4,13 +4,11 @@ import { navs } from '@/config/navs';
import useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common';
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
import { Button } from '@workspace/ui/components/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@workspace/ui/components/dropdown-menu';
@ -27,37 +25,58 @@ export function UserNav() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size='icon' variant='default'>
<Avatar className='size-8'>
<AvatarImage alt={user?.avatar ?? ''} src={user?.avatar ?? ''} />
<AvatarFallback className='rounded-none bg-transparent'>
<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">
<AvatarImage
alt={user?.avatar ?? ''}
src={user?.auth_methods?.[0]?.auth_identifier ?? ''}
className="object-cover"
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background font-medium">
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback>
</Avatar>
</Button>
<span className="text-sm max-w-[40px] sm:max-w-[100px] truncate">
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</span>
<Icon icon="lucide:chevron-down" className="size-4 text-muted-foreground" />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent forceMount align='end' className='w-56'>
<DropdownMenuLabel className='font-normal'>
<div className='flex flex-col space-y-1'>
<p className='text-muted-foreground text-xs leading-none'>ID: {user?.id}</p>
<p className='text-sm font-medium leading-none'>
<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"
/>
<AvatarFallback className="bg-gradient-to-br from-primary/90 to-primary text-background">
{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">
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
</p>
<p className="text-xs text-muted-foreground">
{user?.auth_methods?.[0]?.auth_identifier}
</p>
</div>
</DropdownMenuLabel>
</div>
<DropdownMenuSeparator />
{navs.map((nav) => (
<DropdownMenuGroup key={nav.title}>
{/* {nav.items && <DropdownMenuLabel>{t(nav.title)}</DropdownMenuLabel>} */}
{(nav.items || [nav]).map((item) => (
<DropdownMenuItem
key={item.title}
onClick={() => {
router.push(`${item.url}`);
}}
className="flex items-center gap-2 py-2 cursor-pointer"
>
<Icon className='mr-2 size-4 flex-none' icon={item.icon!} />
<span className='truncate'>{t(item.title)}</span>
<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" />
</DropdownMenuItem>
))}
</DropdownMenuGroup>
@ -68,10 +87,10 @@ export function UserNav() {
Logout();
setUser();
}}
className="flex items-center gap-2 py-2 text-destructive focus:text-destructive cursor-pointer"
>
<Icon className='mr-2 size-4 flex-none' icon='uil:exit' />
{t('logout')}
<Icon className="size-4 flex-none" icon="uil:exit" />
<span className="flex-grow">{t('logout')}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>