@wealthx/shadcn 1.2.1 → 1.2.2

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

@@ -0,0 +1,517 @@
+/**
+ * SidebarNav — WealthX Design System
+ *
+ * Presentational sidebar navigation organism.
+ * 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).
+ *
+ * - All icons must be Lucide icons (LucideIcon type).
+ * - Supports collapsible sub-items (accordion).
+ * - Collapsed state: icon-only, metrics hidden.
+ * - metricsGroups: optional financial summary rows (Frontend sidebar only).
+ * - No internal navigation — consumers wire onNavigate / onLogout.
+ */
+import * as React from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Info,
+  LogOut,
+  PanelLeftClose,
+  PanelLeftOpen,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+export interface SidebarNavSubItem {
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+export interface SidebarNavItem {
+  /** Lucide icon component */
+  icon: LucideIcon;
+  title: string;
+  href: string;
+  isActive?: boolean;
+  /** When true, renders an expandable group with subItems */
+  isCollapsible?: boolean;
+  subItems?: SidebarNavSubItem[];
+}
+
+export interface SidebarNavMetricItem {
+  name: string;
+  /** Numeric value in dollars — formatted as currency automatically */
+  value: number;
+  /** Net items show +/- prefix and a primary-color underline */
+  isNetItem?: boolean;
+  /** Optional tooltip text shown via Info icon */
+  info?: string;
+}
+
+export interface SidebarNavMetricsGroup {
+  items: SidebarNavMetricItem[];
+}
+
+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).
+   * Use a horizontal/landscape logo (max-height 32px).
+   * The image is rendered white via CSS filter — use a logo with non-transparent paths.
+   */
+  logo?: string;
+  /**
+   * Optional icon-only logo URL shown when the sidebar is collapsed.
+   * Use a square icon variant of the logo (rendered at 32×32px, white filter applied).
+   */
+  logoCollapsed?: string;
+  /**
+   * Optional financial metric groups rendered between the user section and
+   * nav items. Hidden when 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;
+  className?: string;
+}
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .filter(Boolean)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+function formatCurrency(value: number, isNetItem = false): string {
+  const abs = Math.abs(value);
+  const formatted = new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(abs);
+  if (!isNetItem) return formatted;
+  if (value > 0) return `+${formatted}`;
+  if (value < 0) return `-${formatted}`;
+  return formatted;
+}
+
+function navIconCn(isActive: boolean): string {
+  return cn(
+    "shrink-0 transition-colors",
+    isActive
+      ? "text-primary"
+      : "text-brand-secondary-foreground/50 group-hover:text-brand-secondary-foreground",
+  );
+}
+
+// ─── NavTooltip ────────────────────────────────────────────────────────────────
+// Wraps content in a right-side tooltip only when the sidebar is collapsed.
+
+interface NavTooltipProps {
+  label: string;
+  collapsed: boolean;
+  children: React.ReactElement;
+}
+
+function NavTooltip({ label, collapsed, children }: NavTooltipProps) {
+  if (!collapsed) return children;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={children} />
+      <TooltipContent side="right">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+// ─── MetricsGroup ──────────────────────────────────────────────────────────────
+
+interface MetricsGroupProps {
+  group: SidebarNavMetricsGroup;
+}
+
+function MetricsGroup({ group }: MetricsGroupProps) {
+  return (
+    <div className="border-b border-white/15 py-4 px-5 flex flex-col gap-1.5">
+      {group.items.map((item) => (
+        <div
+          key={item.name}
+          className="flex items-center justify-between gap-2"
+        >
+          <div className="flex items-center gap-1 min-w-0">
+            <span
+              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",
+              )}
+            >
+              {item.name}
+            </span>
+            {item.info && (
+              <Info
+                size={11}
+                strokeWidth={2}
+                className="shrink-0 text-brand-secondary-foreground/50"
+              />
+            )}
+          </div>
+          <span
+            className={cn(
+              "text-sm font-semibold tabular-nums shrink-0 text-brand-secondary-foreground",
+              item.isNetItem && item.value < 0 && "text-destructive",
+            )}
+          >
+            {formatCurrency(item.value, item.isNetItem)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── SidebarNavItemView (single link) ──────────────────────────────────────────
+
+interface SidebarNavItemViewProps {
+  item: SidebarNavItem;
+  collapsed: boolean;
+  onNavigate?: (href: string) => void;
+}
+
+function SidebarNavItemView({
+  item,
+  collapsed,
+  onNavigate,
+}: SidebarNavItemViewProps) {
+  const Icon = item.icon;
+
+  return (
+    <NavTooltip label={item.title} collapsed={collapsed}>
+      <button
+        type="button"
+        onClick={() => onNavigate?.(item.href)}
+        className={cn(
+          "group flex w-full items-center gap-3 py-2.5 text-base font-medium transition-colors",
+          "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
+          collapsed
+            ? "justify-center px-2"
+            : cn(
+                "px-3 border-l-4",
+                item.isActive
+                  ? "bg-white/15 text-brand-secondary-foreground border-primary"
+                  : "border-transparent",
+              ),
+        )}
+      >
+        <Icon
+          className={navIconCn(item.isActive ?? false)}
+          size={18}
+          strokeWidth={1.75}
+        />
+        {!collapsed && <span className="truncate">{item.title}</span>}
+      </button>
+    </NavTooltip>
+  );
+}
+
+// ─── CollapsibleNavItem (accordion group) ──────────────────────────────────────
+
+interface CollapsibleNavItemProps {
+  item: SidebarNavItem;
+  collapsed: boolean;
+  onNavigate?: (href: string) => void;
+}
+
+function CollapsibleNavItem({
+  item,
+  collapsed,
+  onNavigate,
+}: CollapsibleNavItemProps) {
+  const Icon = item.icon;
+  const hasActiveChild = item.subItems?.some((sub) => sub.isActive) ?? false;
+  const [open, setOpen] = React.useState(hasActiveChild);
+
+  React.useEffect(() => {
+    if (hasActiveChild) setOpen(true);
+  }, [hasActiveChild]);
+
+  if (collapsed) {
+    return (
+      <NavTooltip label={item.title} collapsed={collapsed}>
+        <button
+          type="button"
+          onClick={() => onNavigate?.(item.href)}
+          className={cn(
+            "group flex w-full items-center 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",
+          )}
+        >
+          <Icon
+            className={navIconCn(hasActiveChild)}
+            size={18}
+            strokeWidth={1.75}
+          />
+        </button>
+      </NavTooltip>
+    );
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={cn(
+          "group flex w-full items-center 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"
+              onClick={() => onNavigate?.(sub.href)}
+              className={cn(
+                "flex w-full items-center 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>
+      )}
+    </div>
+  );
+}
+
+// ─── SidebarNav (root) ─────────────────────────────────────────────────────────
+
+export function SidebarNav({
+  items,
+  userName = "Anonymous User",
+  collapsed = false,
+  logo,
+  logoCollapsed,
+  metricsGroups,
+  onNavigate,
+  onLogout,
+  onCollapsedChange,
+  className,
+}: SidebarNavProps) {
+  const [userMenuOpen, setUserMenuOpen] = React.useState(false);
+
+  return (
+    <TooltipProvider>
+      <nav
+        data-slot="sidebar-nav"
+        data-collapsed={collapsed}
+        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,
+        )}
+      >
+        {/* 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)" }}
+            />
+          </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)" }}
+            />
+          </div>
+        )}
+
+        {/* User section */}
+        <div className="border-b border-white/15">
+          <NavTooltip label={userName} collapsed={collapsed}>
+            <button
+              type="button"
+              onClick={() => !collapsed && setUserMenuOpen((prev) => !prev)}
+              className={cn(
+                "group flex w-full items-center 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",
+              )}
+            >
+              <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"
+                onClick={onLogout}
+                className={cn(
+                  "flex w-full items-center 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>
+          )}
+        </div>
+
+        {/* Financial metrics (Frontend sidebar only, hidden when collapsed) */}
+        {!collapsed && !!metricsGroups?.length && (
+          <div>
+            {metricsGroups.map((group, i) => (
+              <MetricsGroup key={i} group={group} />
+            ))}
+          </div>
+        )}
+
+        {/* Nav items */}
+        <div className="flex flex-col overflow-y-auto py-3">
+          {items.map((item) =>
+            item.isCollapsible ? (
+              <CollapsibleNavItem
+                key={item.href}
+                item={item}
+                collapsed={collapsed}
+                onNavigate={onNavigate}
+              />
+            ) : (
+              <SidebarNavItemView
+                key={item.href}
+                item={item}
+                collapsed={collapsed}
+                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}
+            >
+              <button
+                type="button"
+                onClick={() => onCollapsedChange(!collapsed)}
+                className={cn(
+                  "flex w-full items-center 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}
+                    strokeWidth={1.75}
+                    className="shrink-0"
+                  />
+                ) : (
+                  <PanelLeftClose
+                    size={18}
+                    strokeWidth={1.75}
+                    className="shrink-0"
+                  />
+                )}
+                {!collapsed && <span className="text-sm">Collapse</span>}
+              </button>
+            </NavTooltip>
+          </div>
+        )}
+      </nav>
+    </TooltipProvider>
+  );
+}