feat: enhance UserInfo component to conditionally display user details

resources/js/components/nav-user.tsx

@@ -1,5 +1,4 @@
 import { usePage } from '@inertiajs/react';
-import { ChevronsUpDown } from 'lucide-react';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -31,11 +30,10 @@ export function NavUser() {
                     <DropdownMenuTrigger asChild>
                         <SidebarMenuButton
                             size="lg"
-                            className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent"
+                            className="group hover:bg-transparent data-[state=open]:bg-transparent"
                             data-test="sidebar-menu-button"
                         >
-                            <UserInfo user={auth.user} />
+                            <UserInfo user={auth.user} showDetails={false} />
-                            <ChevronsUpDown className="ml-auto size-4" />
                         </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent

resources/js/components/user-info.tsx

@@ -5,9 +5,11 @@ import type { User } from '@/types';
 export function UserInfo({
     user,
     showEmail = false,
+    showDetails = true,
 }: {
     user: User;
     showEmail?: boolean;
+    showDetails?: boolean;
 }) {
     const getInitials = useInitials();
 
@@ -19,14 +21,16 @@ export function UserInfo({
                     {getInitials(user.name)}
                 </AvatarFallback>
             </Avatar>
-            <div className="grid flex-1 text-left text-sm leading-tight">
+            {showDetails && (
-                <span className="truncate font-medium">{user.name}</span>
+                <div className="grid flex-1 text-left text-sm leading-tight">
-                {showEmail && (
+                    <span className="truncate font-medium">{user.name}</span>
-                    <span className="truncate text-xs text-muted-foreground">
+                    {showEmail && (
-                        {user.email}
+                        <span className="truncate text-xs text-muted-foreground">
-                    </span>
+                            {user.email}
-                )}
+                        </span>
-            </div>
+                    )}
+                </div>
+            )}
         </>
     );
 }