vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UserInfo component to conditionally display user details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-14 23:10:44 +07:00
parent eaa2662eed
commit 53fc170a7e
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/nav-user.tsx
View File

@ -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

20
resources/js/components/user-info.tsx
View File

@ -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>
)}
</>
);
}