@wealthx/shadcn 1.5.33 → 1.5.35

package/src/components/ui/sidebar-nav.tsx

@@ -5,11 +5,12 @@
  * Used by both Backoffice (Wealth Pro) and Frontend (WealthX app).
  *
  * Background: bg-brand-secondary (tenant dark navy — set via ThemeProvider).
- * Text:       text-brand-brand-secondary-foreground (white on dark navy).
+ * Text:       text-brand-secondary-foreground (white on dark navy).
  *
  * - All icons must be Lucide icons (LucideIcon type).
  * - Supports collapsible sub-items (accordion).
- * - Collapsed state: icon-only, metrics animated out.
+ * - Hover mode (default): sidebar is icon-only; hovering expands it temporarily.
+ * - Lock mode: clicking the Pin button keeps the sidebar expanded after mouse leaves.
  * - metricsGroups: optional financial summary rows (Frontend sidebar only).
  * - No internal navigation — consumers wire onNavigate / onLogout.
  */
@@ -19,8 +20,8 @@ import {
   ChevronRight,
   Info,
   LogOut,
-  PanelLeftClose,
-  PanelLeftOpen,
+  Pin,
+  PinOff,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
@@ -72,8 +73,6 @@ export interface SidebarNavProps {
   items: SidebarNavItem[];
   /** Display name for the current user */
   userName?: string;
-  /** Whether the sidebar is in narrow (icon-only) mode */
-  collapsed?: boolean;
   /**
    * Optional logo URL rendered at the top of the sidebar.
    * Hidden when collapsed (unless logoCollapsed is provided).
@@ -88,13 +87,21 @@ export interface SidebarNavProps {
   logoCollapsed?: string;
   /**
    * Optional financial metric groups rendered between the user section and
-   * nav items. Hidden when collapsed. Used by the Frontend (WealthX app) sidebar.
+   * nav items. Hidden when sidebar is collapsed. Used by the Frontend (WealthX app) sidebar.
    */
   metricsGroups?: SidebarNavMetricsGroup[];
   onNavigate?: (href: string) => void;
   onLogout?: () => void;
-  /** Called when the user clicks the expand/collapse toggle button at the bottom */
-  onCollapsedChange?: (collapsed: boolean) => void;
+  /**
+   * Initial locked (pinned) state. When true, sidebar starts expanded and stays
+   * open even without hover. Defaults to false (hover-to-expand mode).
+   */
+  defaultLocked?: boolean;
+  /**
+   * Called when the user toggles the Pin/Unpin button.
+   * Use to persist the preference (e.g. localStorage).
+   */
+  onLockedChange?: (locked: boolean) => void;
   className?: string;
 }
 
@@ -105,7 +112,7 @@ function navIconCn(isActive: boolean): string {
     "shrink-0 transition-colors",
     isActive
       ? "text-primary"
-      : "text-brand-secondary-foreground/50 group-hover:text-brand-secondary-foreground",
+      : "text-brand-secondary-foreground/50 group-hover:text-brand-secondary-foreground"
   );
 }
 
@@ -147,7 +154,7 @@ function MetricsGroup({ group }: MetricsGroupProps) {
               className={cn(
                 "text-sm truncate text-brand-secondary-foreground/80",
                 item.isNetItem &&
-                  "font-semibold text-brand-secondary-foreground border-b-2 border-primary pb-px",
+                  "font-semibold text-brand-secondary-foreground border-b-2 border-primary pb-px"
               )}
             >
               {item.name}
@@ -163,7 +170,7 @@ function MetricsGroup({ group }: MetricsGroupProps) {
           <span
             className={cn(
               "text-sm font-semibold tabular-nums shrink-0 text-brand-secondary-foreground",
-              item.isNetItem && item.value < 0 && "text-destructive",
+              item.isNetItem && item.value < 0 && "text-destructive"
             )}
           >
             {formatCurrency(item.value, { showSign: item.isNetItem })}
@@ -204,8 +211,8 @@ function SidebarNavItemView({
                 "justify-start px-3 border-l-4",
                 item.isActive
                   ? "bg-white/15 text-brand-secondary-foreground border-primary"
-                  : "border-transparent",
-              ),
+                  : "border-transparent"
+              )
         )}
       >
         <Icon
@@ -250,7 +257,7 @@ function CollapsibleNavItem({
           className={cn(
             "group h-auto w-full justify-center px-2 py-2.5 transition-colors",
             "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
-            hasActiveChild && "bg-white/15 text-brand-secondary-foreground",
+            hasActiveChild && "bg-white/15 text-brand-secondary-foreground"
           )}
         >
           <Icon
@@ -276,7 +283,7 @@ function CollapsibleNavItem({
               "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
               "border-l-4 border-transparent",
               hasActiveChild &&
-                "bg-white/15 text-brand-secondary-foreground border-primary",
+                "bg-white/15 text-brand-secondary-foreground border-primary"
             )}
           >
             <Icon
@@ -288,7 +295,7 @@ function CollapsibleNavItem({
             <ChevronDown
               className={cn(
                 "ml-auto shrink-0 text-brand-secondary-foreground/40 transition-transform duration-200",
-                "group-data-[panel-open]:rotate-180",
+                "group-data-[panel-open]:rotate-180"
               )}
               size={14}
               strokeWidth={2}
@@ -308,7 +315,7 @@ function CollapsibleNavItem({
                   className={cn(
                     "h-auto w-full justify-start gap-2 py-1.5 pl-1 text-sm transition-colors",
                     "text-brand-secondary-foreground/50 hover:text-brand-secondary-foreground",
-                    sub.isActive && "text-primary font-medium",
+                    sub.isActive && "text-primary font-medium"
                   )}
                 >
                   <ChevronRight
@@ -318,7 +325,7 @@ function CollapsibleNavItem({
                       "shrink-0",
                       sub.isActive
                         ? "text-primary"
-                        : "text-brand-secondary-foreground/30",
+                        : "text-brand-secondary-foreground/30"
                     )}
                   />
                   <span className="truncate">{sub.title}</span>
@@ -337,48 +344,63 @@ function CollapsibleNavItem({
 export function SidebarNav({
   items,
   userName = "Anonymous User",
-  collapsed = false,
   logo,
   logoCollapsed,
   metricsGroups,
   onNavigate,
   onLogout,
-  onCollapsedChange,
+  defaultLocked = false,
+  onLockedChange,
   className,
 }: SidebarNavProps) {
+  const [isLocked, setIsLocked] = React.useState(defaultLocked);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  // Sidebar is expanded when pinned OR when the user is hovering over it.
+  const isExpanded = isLocked || isHovered;
+
   const [userMenuOpen, setUserMenuOpen] = React.useState(false);
   const navScrollRef = React.useRef<HTMLDivElement>(null);
   const expandedScrollRef = React.useRef(0);
 
+  const handleLockToggle = () => {
+    const next = !isLocked;
+    setIsLocked(next);
+    onLockedChange?.(next);
+  };
+
   React.useEffect(() => {
-    if (collapsed) setUserMenuOpen(false);
-  }, [collapsed]);
+    if (!isExpanded) setUserMenuOpen(false);
+  }, [isExpanded]);
 
   // Preserve nav items scroll position across collapse/expand transitions.
   // Cleanup saves scrollTop before the DOM changes; setup restores it when expanding.
   React.useLayoutEffect(() => {
     const nav = navScrollRef.current;
     if (!nav) return;
-    if (!collapsed) {
+    if (isExpanded) {
       nav.scrollTop = expandedScrollRef.current;
     }
     return () => {
-      if (!collapsed && nav) {
+      if (isExpanded && nav) {
         expandedScrollRef.current = nav.scrollTop;
       }
     };
-  }, [collapsed]);
+  }, [isExpanded]);
 
   return (
     <TooltipProvider>
       <nav
         data-slot="sidebar-nav"
-        data-collapsed={collapsed}
+        data-expanded={isExpanded}
+        data-locked={isLocked}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
         className={cn(
           "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
           "transition-all duration-200 ease-in-out",
-          collapsed ? "w-14" : "w-[279px]",
-          className,
+          isExpanded ? "w-[279px]" : "w-14",
+          className
         )}
       >
         {/* Logo — crossfade between full and icon variant */}
@@ -390,7 +412,7 @@ export function SidebarNav({
                 alt="Logo"
                 className={cn(
                   "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
-                  collapsed ? "opacity-0" : "opacity-100",
+                  !isExpanded ? "opacity-0" : "opacity-100"
                 )}
               />
             )}
@@ -400,7 +422,7 @@ export function SidebarNav({
                 alt="Logo"
                 className={cn(
                   "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
-                  collapsed ? "opacity-100" : "opacity-0",
+                  !isExpanded ? "opacity-100" : "opacity-0"
                 )}
               />
             )}
@@ -412,7 +434,7 @@ export function SidebarNav({
           {/* Expanded — in flow (defines height), no transition (overlay handles it) */}
           <div
             className={cn(
-              collapsed ? "opacity-0 pointer-events-none" : "opacity-100",
+              !isExpanded ? "opacity-0 pointer-events-none" : "opacity-100"
             )}
           >
             <Accordion
@@ -424,7 +446,7 @@ export function SidebarNav({
                   <AccordionPrimitive.Trigger
                     className={cn(
                       "group flex h-auto w-full items-center justify-start gap-3 px-5 py-5 text-base transition-colors",
-                      "text-brand-secondary-foreground hover:bg-white/10",
+                      "text-brand-secondary-foreground hover:bg-white/10"
                     )}
                   >
                     <div className="flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground">
@@ -449,7 +471,7 @@ export function SidebarNav({
                       onClick={onLogout}
                       className={cn(
                         "h-auto w-full justify-start gap-3 px-5 py-3 text-base",
-                        "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground transition-colors",
+                        "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground transition-colors"
                       )}
                     >
                       <LogOut
@@ -466,11 +488,11 @@ export function SidebarNav({
           </div>
 
           {/* Collapsed — absolute overlay, centered avatar */}
-          <NavTooltip label={userName} collapsed={collapsed}>
+          <NavTooltip label={userName} collapsed={!isExpanded}>
             <div
               className={cn(
                 "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
-                collapsed ? "opacity-100" : "opacity-0 pointer-events-none",
+                !isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
               )}
             >
               <div className="flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground">
@@ -480,10 +502,10 @@ export function SidebarNav({
           </NavTooltip>
         </div>
 
-        {/* Financial metrics — animated in/out with sidebar collapse to prevent nav items jumping */}
+        {/* Financial metrics — animated in/out with sidebar expand to prevent nav items jumping */}
         {!!metricsGroups?.length && (
           <Accordion
-            value={!collapsed ? ["metrics"] : []}
+            value={isExpanded ? ["metrics"] : []}
             onValueChange={() => {}}
           >
             <AccordionItem className="border-none" value="metrics">
@@ -503,55 +525,54 @@ export function SidebarNav({
               <CollapsibleNavItem
                 key={item.href}
                 item={item}
-                collapsed={collapsed}
+                collapsed={!isExpanded}
                 onNavigate={onNavigate}
               />
             ) : (
               <SidebarNavItemView
                 key={item.href}
                 item={item}
-                collapsed={collapsed}
+                collapsed={!isExpanded}
                 onNavigate={onNavigate}
               />
-            ),
+            )
           )}
         </div>
 
-        {/* Expand/collapse toggle */}
-        {onCollapsedChange && (
-          <div className="mt-auto border-t border-white/15 bg-white/8">
-            <NavTooltip
-              label={collapsed ? "Expand" : "Collapse"}
-              collapsed={collapsed}
+        {/* Pin / Unpin toggle — always visible */}
+        <div className="mt-auto border-t border-white/15 bg-white/10">
+          <NavTooltip
+            label={isLocked ? "Unpin sidebar" : "Pin sidebar open"}
+            collapsed={!isExpanded}
+          >
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={handleLockToggle}
+              className={cn(
+                "h-12 w-full items-center gap-3 py-3 transition-colors",
+                "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
+                isExpanded ? "justify-start px-3" : "justify-center px-2",
+                isLocked && "text-primary"
+              )}
             >
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => onCollapsedChange(!collapsed)}
-                className={cn(
-                  "h-12 w-full justify-start gap-3 px-3 py-3 transition-colors",
-                  "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
-                  collapsed && "justify-center px-2",
-                )}
-              >
-                {collapsed ? (
-                  <PanelLeftOpen
-                    size={24}
-                    strokeWidth={1.75}
-                    className="shrink-0"
-                  />
-                ) : (
-                  <PanelLeftClose
-                    size={24}
-                    strokeWidth={1.75}
-                    className="shrink-0"
-                  />
-                )}
-                {!collapsed && <span className="text-sm">Collapse</span>}
-              </Button>
-            </NavTooltip>
-          </div>
-        )}
+              {isLocked ? (
+                <Pin size={24} strokeWidth={1.75} className="shrink-0" />
+              ) : (
+                <PinOff
+                  size={24}
+                  strokeWidth={1.75}
+                  className="shrink-0 opacity-60"
+                />
+              )}
+              {isExpanded && (
+                <span className="text-sm">
+                  {isLocked ? "Pinned" : "Pin sidebar"}
+                </span>
+              )}
+            </Button>
+          </NavTooltip>
+        </div>
       </nav>
     </TooltipProvider>
   );