@wealthx/shadcn 1.3.0 → 1.3.2

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

@@ -9,7 +9,7 @@
  *
  * - All icons must be Lucide icons (LucideIcon type).
  * - Supports collapsible sub-items (accordion).
- * - Collapsed state: icon-only, metrics hidden.
+ * - Collapsed state: icon-only, metrics animated out.
  * - metricsGroups: optional financial summary rows (Frontend sidebar only).
  * - No internal navigation — consumers wire onNavigate / onLogout.
  */
@@ -23,8 +23,10 @@ import {
   PanelLeftOpen,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
+import { Accordion, AccordionContent, AccordionItem } from "./accordion";
 import { Button } from "./button";
 import {
   Tooltip,
@@ -108,7 +110,6 @@ function getInitials(name: string): string {
     .slice(0, 2);
 }
 
-
 function navIconCn(isActive: boolean): string {
   return cn(
     "shrink-0 transition-colors",
@@ -219,7 +220,7 @@ function SidebarNavItemView({
       >
         <Icon
           className={navIconCn(item.isActive ?? false)}
-          size={18}
+          size={24}
           strokeWidth={1.75}
         />
         {!collapsed && <span className="truncate">{item.title}</span>}
@@ -264,7 +265,7 @@ function CollapsibleNavItem({
         >
           <Icon
             className={navIconCn(hasActiveChild)}
-            size={18}
+            size={24}
             strokeWidth={1.75}
           />
         </Button>
@@ -273,65 +274,71 @@ function CollapsibleNavItem({
   }
 
   return (
-    <div>
-      <Button
-        type="button"
-        variant="ghost"
-        onClick={() => setOpen((prev) => !prev)}
-        className={cn(
-          "group h-auto w-full justify-start gap-3 px-3 py-2.5 text-base font-medium transition-colors",
-          "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",
-        )}
-      >
-        <Icon
-          className={navIconCn(hasActiveChild)}
-          size={18}
-          strokeWidth={1.75}
-        />
-        <span className="flex-1 truncate text-left">{item.title}</span>
-        <ChevronDown
-          className={cn(
-            "ml-auto shrink-0 text-brand-secondary-foreground/40 transition-transform duration-200",
-            open && "rotate-180",
-          )}
-          size={14}
-          strokeWidth={2}
-        />
-      </Button>
-
-      {open && item.subItems && (
-        <div className="ml-9 border-l border-white/15 pl-3">
-          {item.subItems.map((sub) => (
-            <Button
-              key={sub.href}
-              type="button"
-              variant="ghost"
-              onClick={() => onNavigate?.(sub.href)}
+    <Accordion
+      value={open ? [item.href] : []}
+      onValueChange={(values) => setOpen(values.length > 0)}
+    >
+      <AccordionItem className="border-none" value={item.href}>
+        <AccordionPrimitive.Header className="flex">
+          <AccordionPrimitive.Trigger
+            className={cn(
+              "group flex h-auto w-full items-center justify-start gap-3 px-3 py-2.5 text-base font-medium transition-colors",
+              "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",
+            )}
+          >
+            <Icon
+              className={navIconCn(hasActiveChild)}
+              size={24}
+              strokeWidth={1.75}
+            />
+            <span className="flex-1 truncate text-left">{item.title}</span>
+            <ChevronDown
               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",
+                "ml-auto shrink-0 text-brand-secondary-foreground/40 transition-transform duration-200",
+                "group-data-[panel-open]:rotate-180",
               )}
-            >
-              <ChevronRight
-                size={11}
-                strokeWidth={2}
-                className={cn(
-                  "shrink-0",
-                  sub.isActive
-                    ? "text-primary"
-                    : "text-brand-secondary-foreground/30",
-                )}
-              />
-              <span className="truncate">{sub.title}</span>
-            </Button>
-          ))}
-        </div>
-      )}
-    </div>
+              size={14}
+              strokeWidth={2}
+            />
+          </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+
+        {item.subItems && (
+          <AccordionContent className="p-0 text-inherit">
+            <div className="ml-9 border-l border-white/15 pl-3">
+              {item.subItems.map((sub) => (
+                <Button
+                  key={sub.href}
+                  type="button"
+                  variant="ghost"
+                  onClick={() => onNavigate?.(sub.href)}
+                  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",
+                  )}
+                >
+                  <ChevronRight
+                    size={11}
+                    strokeWidth={2}
+                    className={cn(
+                      "shrink-0",
+                      sub.isActive
+                        ? "text-primary"
+                        : "text-brand-secondary-foreground/30",
+                    )}
+                  />
+                  <span className="truncate">{sub.title}</span>
+                </Button>
+              ))}
+            </div>
+          </AccordionContent>
+        )}
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -350,6 +357,27 @@ export function SidebarNav({
   className,
 }: SidebarNavProps) {
   const [userMenuOpen, setUserMenuOpen] = React.useState(false);
+  const navScrollRef = React.useRef<HTMLDivElement>(null);
+  const expandedScrollRef = React.useRef(0);
+
+  React.useEffect(() => {
+    if (collapsed) setUserMenuOpen(false);
+  }, [collapsed]);
+
+  // 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) {
+      nav.scrollTop = expandedScrollRef.current;
+    }
+    return () => {
+      if (!collapsed && nav) {
+        expandedScrollRef.current = nav.scrollTop;
+      }
+    };
+  }, [collapsed]);
 
   return (
     <TooltipProvider>
@@ -357,105 +385,131 @@ export function SidebarNav({
         data-slot="sidebar-nav"
         data-collapsed={collapsed}
         className={cn(
-          // Force dark-mode CSS variable resolution — sidebar is always dark-backgrounded
-          // regardless of system theme, so semantic tokens (destructive, success, etc.)
-          // must use their dark-mode values to maintain WCAG contrast.
-          "dark flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
+          "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,
         )}
       >
-        {/* Logo */}
-        {!collapsed && logo && (
-          <div className="flex items-center border-b border-white/15 px-5 py-4">
-            <img
-              src={logo}
-              alt="Logo"
-              className="h-8 w-auto object-contain object-left"
-              style={{ filter: "brightness(0) invert(1)" }}
-            />
+        {/* Logo — crossfade between full and icon variant */}
+        {(logo || logoCollapsed) && (
+          <div className="relative flex items-center border-b border-white/15 py-4 overflow-hidden">
+            {logo && (
+              <img
+                src={logo}
+                alt="Logo"
+                className={cn(
+                  "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
+                  collapsed ? "opacity-0" : "opacity-100",
+                )}
+                style={{ filter: "brightness(0) invert(1)" }}
+              />
+            )}
+            {logoCollapsed && (
+              <img
+                src={logoCollapsed}
+                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",
+                )}
+                style={{ filter: "brightness(0) invert(1)" }}
+              />
+            )}
           </div>
         )}
-        {collapsed && logoCollapsed && (
-          <div className="flex items-center justify-center border-b border-white/15 py-4">
-            <img
-              src={logoCollapsed}
-              alt="Logo"
-              className="h-8 w-8 object-contain"
-              style={{ filter: "brightness(0) invert(1)" }}
-            />
+
+        {/* User section — crossfade between expanded and collapsed */}
+        <div className="relative border-b border-white/15">
+          {/* Expanded — in flow (defines height), no transition (overlay handles it) */}
+          <div
+            className={cn(
+              collapsed ? "opacity-0 pointer-events-none" : "opacity-100",
+            )}
+          >
+            <Accordion
+              value={userMenuOpen ? ["user-menu"] : []}
+              onValueChange={(values) => setUserMenuOpen(values.length > 0)}
+            >
+              <AccordionItem className="border-none" value="user-menu">
+                <AccordionPrimitive.Header className="flex">
+                  <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",
+                    )}
+                  >
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground">
+                      {getInitials(userName)}
+                    </div>
+                    <span className="flex-1 truncate text-left font-medium text-brand-secondary-foreground">
+                      {userName}
+                    </span>
+                    <ChevronDown
+                      className="ml-auto shrink-0 text-brand-secondary-foreground/50 transition-transform duration-200 group-data-[panel-open]:rotate-180"
+                      size={16}
+                      strokeWidth={2}
+                    />
+                  </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+
+                <AccordionContent className="p-0 text-inherit">
+                  <div className="border-t border-white/15 bg-black/20">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      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",
+                      )}
+                    >
+                      <LogOut
+                        size={16}
+                        strokeWidth={1.75}
+                        className="shrink-0 text-destructive"
+                      />
+                      <span>Logout</span>
+                    </Button>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
-        )}
 
-        {/* User section */}
-        <div className="border-b border-white/15">
+          {/* Collapsed — absolute overlay, centered avatar */}
           <NavTooltip label={userName} collapsed={collapsed}>
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => !collapsed && setUserMenuOpen((prev) => !prev)}
+            <div
               className={cn(
-                "group h-auto w-full justify-start gap-3 px-5 py-5 text-base transition-colors",
-                "text-brand-secondary-foreground hover:bg-white/10",
-                collapsed && "justify-center px-2 py-4",
+                "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
+                collapsed ? "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">
                 {getInitials(userName)}
               </div>
-              {!collapsed && (
-                <>
-                  <span className="flex-1 truncate text-left font-medium text-brand-secondary-foreground">
-                    {userName}
-                  </span>
-                  <ChevronDown
-                    className={cn(
-                      "shrink-0 text-brand-secondary-foreground/50 transition-transform duration-200",
-                      userMenuOpen && "rotate-180",
-                    )}
-                    size={16}
-                    strokeWidth={2}
-                  />
-                </>
-              )}
-            </Button>
-          </NavTooltip>
-
-          {/* Logout dropdown */}
-          {!collapsed && userMenuOpen && (
-            <div className="border-t border-white/15 bg-black/20">
-              <Button
-                type="button"
-                variant="ghost"
-                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",
-                )}
-              >
-                <LogOut
-                  size={16}
-                  strokeWidth={1.75}
-                  className="shrink-0 text-destructive"
-                />
-                <span>Logout</span>
-              </Button>
             </div>
-          )}
+          </NavTooltip>
         </div>
 
-        {/* Financial metrics (Frontend sidebar only, hidden when collapsed) */}
-        {!collapsed && !!metricsGroups?.length && (
-          <div>
-            {metricsGroups.map((group, i) => (
-              <MetricsGroup key={i} group={group} />
-            ))}
-          </div>
+        {/* Financial metrics — animated in/out with sidebar collapse to prevent nav items jumping */}
+        {!!metricsGroups?.length && (
+          <Accordion
+            value={!collapsed ? ["metrics"] : []}
+            onValueChange={() => {}}
+          >
+            <AccordionItem className="border-none" value="metrics">
+              <AccordionContent className="p-0 text-inherit">
+                {metricsGroups.map((group, i) => (
+                  <MetricsGroup key={i} group={group} />
+                ))}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         )}
 
         {/* Nav items */}
-        <div className="flex flex-col overflow-y-auto py-3">
+        <div ref={navScrollRef} className="flex flex-col overflow-y-auto py-3">
           {items.map((item) =>
             item.isCollapsible ? (
               <CollapsibleNavItem
@@ -487,20 +541,20 @@ export function SidebarNav({
                 variant="ghost"
                 onClick={() => onCollapsedChange(!collapsed)}
                 className={cn(
-                  "h-auto w-full justify-start gap-3 px-3 py-3 transition-colors",
+                  "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={18}
+                    size={24}
                     strokeWidth={1.75}
                     className="shrink-0"
                   />
                 ) : (
                   <PanelLeftClose
-                    size={18}
+                    size={24}
                     strokeWidth={1.75}
                     className="shrink-0"
                   />