Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-17 13:51:10 -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 useGlobalStore from '@/config/use-global';
import { Logout } from '@/utils/common'; import { Logout } from '@/utils/common';
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar'; import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
import { Button } from '@workspace/ui/components/button';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuGroup, DropdownMenuGroup,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@workspace/ui/components/dropdown-menu'; } from '@workspace/ui/components/dropdown-menu';
@ -27,37 +25,58 @@ export function UserNav() {
return ( return (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button size='icon' variant='default'> <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='size-8'> <Avatar className="h-6 w-6">
<AvatarImage alt={user?.avatar ?? ''} src={user?.avatar ?? ''} /> <AvatarImage
<AvatarFallback className='rounded-none bg-transparent'> 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)} {user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
</AvatarFallback> </AvatarFallback>
</Avatar> </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> </DropdownMenuTrigger>
<DropdownMenuContent forceMount align='end' className='w-56'> <DropdownMenuContent forceMount align="end" className="w-64">
<DropdownMenuLabel className='font-normal'> <div className="flex items-center justify-start gap-2 p-2">
<div className='flex flex-col space-y-1'> <Avatar className="h-10 w-10">
<p className='text-muted-foreground text-xs leading-none'>ID: {user?.id}</p> <AvatarImage
<p className='text-sm font-medium leading-none'> 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} {user?.auth_methods?.[0]?.auth_identifier}
</p> </p>
</div> </div>
</DropdownMenuLabel> </div>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
{navs.map((nav) => ( {navs.map((nav) => (
<DropdownMenuGroup key={nav.title}> <DropdownMenuGroup key={nav.title}>
{/* {nav.items && <DropdownMenuLabel>{t(nav.title)}</DropdownMenuLabel>} */}
{(nav.items || [nav]).map((item) => ( {(nav.items || [nav]).map((item) => (
<DropdownMenuItem <DropdownMenuItem
key={item.title} key={item.title}
onClick={() => { onClick={() => {
router.push(`${item.url}`); 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!} /> <Icon className="size-4 flex-none text-muted-foreground" icon={item.icon!} />
<span className='truncate'>{t(item.title)}</span> <span className="flex-grow truncate">{t(item.title)}</span>
<Icon icon="lucide:chevron-right" className="size-4 text-muted-foreground opacity-50" />
</DropdownMenuItem> </DropdownMenuItem>
))} ))}
</DropdownMenuGroup> </DropdownMenuGroup>
@ -68,10 +87,10 @@ export function UserNav() {
Logout(); Logout();
setUser(); 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' /> <Icon className="size-4 flex-none" icon="uil:exit" />
<span className="flex-grow">{t('logout')}</span>
{t('logout')}
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>