Update nav-user.tsx

Author: hotlong

packages/client/src/components/nav-user.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
+  Bell as BellIcon,
+  CreditCard as CreditCardIcon,
+  LogOut as LogOutIcon,
+  MoreVertical as MoreVerticalIcon,
+  User as UserCircleIcon,
 } from "lucide-react"
 
 import {
@@ -36,7 +36,7 @@ export function NavUser({
   }
 }) {
   const { isMobile } = useSidebar()
-  const { signOut } = useAuth()
+  const { signOut } = useAuth();
 
   return (
     <SidebarMenu>
@@ -49,13 +49,15 @@ export function NavUser({
             >
               <Avatar className="h-8 w-8 rounded-lg">
                 <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">{user.name ? user.name.substring(0,2).toUpperCase() : 'U'}</AvatarFallback>
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {user.email}
+                </span>
               </div>
-              <ChevronsUpDown className="ml-auto size-4" />
+              <MoreVerticalIcon className="ml-auto size-4" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -68,11 +70,13 @@ export function NavUser({
               <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
                   <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">{user.name ? user.name.substring(0,2).toUpperCase() : 'U'}</AvatarFallback>
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-semibold">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.email}
+                  </span>
                 </div>
               </div>
             </DropdownMenuLabel>
@@ -82,24 +86,24 @@ export function NavUser({
                 window.history.pushState({}, '', '/settings');
                 window.dispatchEvent(new Event('pushstate'));
               }}>
-                <BadgeCheck className="mr-2 h-4 w-4" />
-                Account
+                <UserCircleIcon className="mr-2 h-4 w-4" />
+                Settings
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => {
                 window.history.pushState({}, '', '/organization');
                 window.dispatchEvent(new Event('pushstate'));
               }}>
-                <CreditCard className="mr-2 h-4 w-4" />
+                <CreditCardIcon className="mr-2 h-4 w-4" />
                 Organization
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <Bell className="mr-2 h-4 w-4" />
+                <BellIcon className="mr-2 h-4 w-4" />
                 Notifications
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => signOut()}>
-              <LogOut className="mr-2 h-4 w-4" />
+            <DropdownMenuItem onClick={signOut}>
+              <LogOutIcon className="mr-2 h-4 w-4" />
               Log out
             </DropdownMenuItem>
           </DropdownMenuContent>