From 2982d560ce6b5d335de130da6d7cb21e761e383c Mon Sep 17 00:00:00 2001
From: SerinaNya <34389622+SerinaNya@users.noreply.github.com>
Date: Mon, 28 Sep 2026 14:26:48 +0800
Subject: [PATCH] fix(ui): group profile label inside menu

---
 components/nav-user.tsx | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/nav-user.tsx b/components/nav-user.tsx
index 4cea5de..205ff39 100644
--- a/components/nav-user.tsx
+++ b/components/nav-user.tsx
@@ -77,26 +77,28 @@ export function NavUser({ user }: { user: NavUserData }) {
             align="end"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2.5 px-1 py-1.5 text-left text-xs">
-                <Avatar size="sm" className="rounded-lg">
-                  {user.avatar ? (
-                    <AvatarImage src={user.avatar} alt={user.name} />
-                  ) : null}
-                  <AvatarFallback className="rounded-lg text-xs font-medium">
-                    {initials}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-xs leading-tight">
-                  <span className="truncate font-semibold text-foreground">
-                    {user.name}
-                  </span>
-                  <span className="truncate text-[11px] text-muted-foreground">
-                    {user.email}
-                  </span>
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2.5 px-1 py-1.5 text-left text-xs">
+                  <Avatar size="sm" className="rounded-lg">
+                    {user.avatar ? (
+                      <AvatarImage src={user.avatar} alt={user.name} />
+                    ) : null}
+                    <AvatarFallback className="rounded-lg text-xs font-medium">
+                      {initials}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-xs leading-tight">
+                    <span className="truncate font-semibold text-foreground">
+                      {user.name}
+                    </span>
+                    <span className="truncate text-[11px] text-muted-foreground">
+                      {user.email}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </DropdownMenuLabel>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
 
             <DropdownMenuSeparator />