@scripso-homepad/ui 0.4.25 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/layout/Sidebar.tsx

@@ -218,7 +218,7 @@ export function Sidebar({
           </button>
         </div>
 
-        <nav className="flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
+        <nav className="flex w-full min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto">
           {visibleNavItems.map((item) => (
             <SidebarNavItem
               key={item.to}
@@ -228,27 +228,26 @@ export function Sidebar({
               onNavigate={handleNavItemNavigate}
             />
           ))}
+          <div className="mt-auto flex w-full flex-col gap-2">
+            {visibleFooterNavItems.map((item) => (
+              <SidebarNavItem
+                key={item.to}
+                item={item}
+                isOpen={isExpanded}
+                isActive={isNavItemActive(pathname, item)}
+                onNavigate={handleNavItemNavigate}
+              />
+            ))}
+            {user ? (
+              <SidebarUserCard
+                user={user}
+                isOpen={isExpanded}
+                logoutLabel={labels.logout}
+                onLogout={onLogout}
+              />
+            ) : null}
+          </div>
         </nav>
-
-        <div className="flex w-full flex-col gap-4">
-          {visibleFooterNavItems.map((item) => (
-            <SidebarNavItem
-              key={item.to}
-              item={item}
-              isOpen={isExpanded}
-              isActive={isNavItemActive(pathname, item)}
-              onNavigate={handleNavItemNavigate}
-            />
-          ))}
-          {user ? (
-            <SidebarUserCard
-              user={user}
-              isOpen={isExpanded}
-              logoutLabel={labels.logout}
-              onLogout={onLogout}
-            />
-          ) : null}
-        </div>
       </aside>
     </>
   );

package/src/web/layout/SidebarNavItem.tsx

@@ -36,9 +36,9 @@ export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNa
       tabIndex={item.disabled ? -1 : undefined}
       className={cn(
         'relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out',
-        isOpen ? 'w-full gap-4' : 'justify-center gap-0 px-3',
+        isOpen ? 'w-full gap-4' : 'w-full justify-center gap-0 px-3',
         item.disabled && 'pointer-events-none opacity-50',
-        isActive ? 'bg-black/12 text-white' : 'text-navy-100 hover:bg-white/5',
+        isActive ? 'bg-black/12 text-white shadow-none' : 'text-navy-100 shadow-none hover:bg-white/5',
       )}
     >
       <span

package/src/web/layout/SidebarUserCard.tsx

@@ -1,4 +1,5 @@
 import { LogOut } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
 
 import { cn } from '../utils/cn';
 import type { AdminSidebarUser } from './types';
@@ -23,6 +24,9 @@ function getInitials(fullName: string, email: string): string {
   return email.slice(0, 2).toUpperCase();
 }
 
+const avatarCircleClassName =
+  'flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5';
+
 export function SidebarUserCard({
   user,
   isOpen,
@@ -31,37 +35,112 @@ export function SidebarUserCard({
   className,
 }: SidebarUserCardProps) {
   const initials = user.initials ?? getInitials(user.fullName, user.email);
+  const [logoutOpen, setLogoutOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const logoutMenuId = useId();
 
-  return (
+  useEffect(() => {
+    if (isOpen) {
+      setLogoutOpen(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen || !logoutOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setLogoutOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setLogoutOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, logoutOpen]);
+
+  const avatar = (
     <div
-      className={cn(
-        'flex w-full items-center rounded-xl transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out',
-        isOpen ? 'justify-between gap-3 bg-black/12 p-3' : 'justify-center px-3 py-3',
-        className,
-      )}
+      className={cn(avatarCircleClassName, 'typography-14 font-bold text-white')}
+      aria-hidden
     >
+      {initials}
+    </div>
+  );
+
+  if (!isOpen) {
+    return (
       <div
-        className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white"
-        aria-hidden
+        ref={rootRef}
+        className={cn('flex w-full flex-col items-center gap-2', className)}
       >
-        {initials}
-      </div>
-      {isOpen ? (
-        <>
-          <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-            <p className="truncate typography-14 font-bold text-white">{user.fullName}</p>
-            <p className="truncate typography-12 text-storm-gray-100">{user.email}</p>
-          </div>
+        {logoutOpen ? (
           <button
             type="button"
-            onClick={() => onLogout?.()}
-            className="shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95"
+            id={logoutMenuId}
+            onClick={() => {
+              setLogoutOpen(false);
+              onLogout?.();
+            }}
+            className={cn(
+              avatarCircleClassName,
+              'cursor-pointer bg-black/20 text-white',
+              'transition-[background-color,transform] duration-300 ease-in-out',
+              'hover:bg-white/10 active:scale-95',
+            )}
             aria-label={logoutLabel}
           >
             <LogOut size={20} strokeWidth={1.75} />
           </button>
-        </>
-      ) : null}
+        ) : null}
+        <button
+          type="button"
+          onClick={() => setLogoutOpen((open) => !open)}
+          className="flex cursor-pointer items-center justify-center transition-transform duration-300 ease-in-out active:scale-95"
+          aria-expanded={logoutOpen}
+          aria-haspopup="true"
+          aria-controls={logoutOpen ? logoutMenuId : undefined}
+          aria-label={user.fullName}
+        >
+          {avatar}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full items-center justify-between gap-3 rounded-xl bg-black/12 p-3',
+        'transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out',
+        className,
+      )}
+    >
+      {avatar}
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <p className="truncate typography-14 font-bold text-white">{user.fullName}</p>
+        <p className="truncate typography-12 text-storm-gray-100">{user.email}</p>
+      </div>
+      <button
+        type="button"
+        onClick={() => onLogout?.()}
+        className="shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95"
+        aria-label={logoutLabel}
+      >
+        <LogOut size={20} strokeWidth={1.75} />
+      </button>
     </div>
   );
 }