From 53fc170a7e94fb5f2dd5fabb997362aa1cb6aece Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 14 Apr 2026 23:10:44 +0700
Subject: [PATCH] feat: enhance UserInfo component to conditionally display
 user details

---
 resources/js/components/nav-user.tsx  |  6 ++----
 resources/js/components/user-info.tsx | 20 ++++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/nav-user.tsx b/resources/js/components/nav-user.tsx
index a407239..1cc063f 100644
--- a/resources/js/components/nav-user.tsx
+++ b/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} />
-                            <ChevronsUpDown className="ml-auto size-4" />
+                            <UserInfo user={auth.user} showDetails={false} />
                         </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
diff --git a/resources/js/components/user-info.tsx b/resources/js/components/user-info.tsx
index dd0848e..6d9ae36 100644
--- a/resources/js/components/user-info.tsx
+++ b/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">
-                <span className="truncate font-medium">{user.name}</span>
-                {showEmail && (
-                    <span className="truncate text-xs text-muted-foreground">
-                        {user.email}
-                    </span>
-                )}
-            </div>
+            {showDetails && (
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{user.name}</span>
+                    {showEmail && (
+                        <span className="truncate text-xs text-muted-foreground">
+                            {user.email}
+                        </span>
+                    )}
+                </div>
+            )}
         </>
     );
 }