From d2732e650b64d288850f91108edbde4002813e39 Mon Sep 17 00:00:00 2001
From: turbolnk <me@turbolnk.com>
Date: Thu, 6 Mar 2025 09:34:39 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20Enhance=20user?=
 =?UTF-8?q?=20navigation=20dropdown=20ui=20and=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/user/components/user-nav.tsx | 57 ++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/apps/user/components/user-nav.tsx b/apps/user/components/user-nav.tsx
index b1451b0..8472728 100644
--- a/apps/user/components/user-nav.tsx
+++ b/apps/user/components/user-nav.tsx
@@ -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>