@djangocfg/layouts 2.1.356 → 2.1.358

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -1,133 +1,29 @@
 /**
- * Private sidebar: header (brand only when expanded; icon mode shows expand trigger only),
- * nav groups, account footer. Item-count density when **expanded**; collapsed rail always uses `default` metrics so icons match.
+ * Private Sidebar
+ *
+ * Composed from smaller components: SidebarBrand, SidebarNavGroup, SidebarSlots.
+ * Uses PrivateLayoutContext for all UI state.
  */
 
 'use client';
 
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Link,
-} from '@djangocfg/ui-core/components';
-import { ChevronDown } from 'lucide-react';
-import { usePathname as useNextPathname } from 'next/navigation';
 import React from 'react';
 
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarTrigger,
   useSidebar,
 } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { PrivateSidebarAccount } from '../../_components/PrivateSidebarAccount';
-import { LucideIcon } from '../../../components';
-
-import type {
-  HeaderConfig,
-  SidebarActiveIndicator,
-  SidebarConfig,
-  SidebarGroupConfig,
-  SidebarGroupLabelStyle,
-  SidebarItem,
-} from '../PrivateLayout';
-import { SidebarFeatured } from '../../_components/SidebarFeatured';
-
-/** Few items → roomier rows; many items → tighter. Same breakpoints for demo, CarAPIS, etc. */
-const DENSITY_COMFORTABLE_MAX = 5;
-const DENSITY_DEFAULT_MAX = 9;
-
-type NavDensity = 'comfortable' | 'default' | 'compact';
-
-function navDensityFromCount(n: number): NavDensity {
-  if (n <= DENSITY_COMFORTABLE_MAX) return 'comfortable';
-  if (n <= DENSITY_DEFAULT_MAX) return 'default';
-  return 'compact';
-}
-
-/**
- * Nav rows use semantic sidebar tokens so light/dark follows ui-core theme vars.
- */
-const navItemBaseClass = cn(
-  'group/nav relative border-0 font-medium shadow-none transition-colors',
-  'text-sidebar-foreground/80',
-  'data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground',
-  'hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground',
-  '[&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/70 [&>svg]:opacity-85',
-  '[&>svg]:transition-transform [&>svg]:duration-200 group-hover/nav:[&>svg]:scale-110 group-active/nav:[&>svg]:scale-95',
-  'data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:opacity-100',
-);
-
-const ACTIVE_INDICATOR_CLASS: Record<SidebarActiveIndicator, string> = {
-  background: cn(
-    'data-[active=true]:bg-sidebar-accent',
-    'data-[active=true]:hover:bg-sidebar-accent',
-  ),
-  rail: cn(
-    'data-[active=true]:after:absolute data-[active=true]:after:right-0',
-    'data-[active=true]:after:top-1.5 data-[active=true]:after:bottom-1.5',
-    'data-[active=true]:after:w-[2px] data-[active=true]:after:rounded-l-full',
-    'data-[active=true]:after:bg-primary',
-  ),
-  both: cn(
-    'data-[active=true]:bg-sidebar-accent data-[active=true]:hover:bg-sidebar-accent',
-    'data-[active=true]:after:absolute data-[active=true]:after:right-0',
-    'data-[active=true]:after:top-1.5 data-[active=true]:after:bottom-1.5',
-    'data-[active=true]:after:w-[2px] data-[active=true]:after:rounded-l-full',
-    'data-[active=true]:after:bg-primary',
-  ),
-};
-
-const DENSITY = {
-  comfortable: {
-    menu: 'gap-1.5',
-    group: 'gap-2',
-    groupPad: 'px-2 py-1',
-    label:
-      'h-7 uppercase text-[10px] font-light leading-none tracking-[0.14em] text-sidebar-foreground/40',
-    buttonSize: 'lg' as const,
-    iconClass: 'h-5 w-5',
-    extraButton: 'rounded-lg !px-3',
-    headerRowInset: 'pl-2',
-  },
-  default: {
-    menu: 'gap-1',
-    group: 'gap-1.5',
-    groupPad: 'px-2 py-1',
-    label:
-      'uppercase text-[9px] font-light leading-none tracking-[0.12em] text-sidebar-foreground/50',
-    buttonSize: 'default' as const,
-    iconClass: 'h-4 w-4',
-    extraButton: 'rounded-lg',
-    headerRowInset: 'pl-1.5',
-  },
-  compact: {
-    menu: 'gap-0.5',
-    group: 'gap-0.5',
-    groupPad: 'px-2 py-0.5',
-    label:
-      'h-6 uppercase text-[8px] font-light leading-none tracking-[0.1em] text-sidebar-foreground/40',
-    buttonSize: 'sm' as const,
-    iconClass: 'h-3.5 w-3.5',
-    extraButton: 'rounded-md !px-2',
-    headerRowInset: 'pl-1.5',
-  },
-} as const;
-
-/** Icon rail: always the same geometry — ignore comfortable/compact (larger/smaller rows only when expanded). */
-const RAIL_NAV = DENSITY.default;
+import { PrivateSidebarAccount } from './PrivateSidebarAccount';
+import { PrivateLayoutProvider } from '../context';
+import { useHoverExpand, useShellVisualState, useSidebarKeyboard } from '../hooks';
+import type { HeaderConfig, SidebarConfig } from '../types';
+import { SidebarBrand } from './SidebarBrand';
+import { SidebarNavGroup } from './SidebarNavGroup';
+import { SidebarSlots } from './SidebarSlots';
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
@@ -141,356 +37,143 @@ interface PrivateSidebarProps {
   variant?: 'sidebar' | 'inset';
 }
 
-export function PrivateSidebar({ sidebar, header, pathname: pathnameProp, variant = 'sidebar' }: PrivateSidebarProps) {
-  const pathnameFromNext = useNextPathname();
-  const pathname = pathnameProp ?? pathnameFromNext;
-  const { state, isMobile, setOpen, setOpenMobile } = useSidebar();
-  const homeHref = sidebar.homeHref || '/';
+export function PrivateSidebar({
+  sidebar,
+  header,
+  pathname: pathnameProp,
+  variant = 'sidebar',
+}: PrivateSidebarProps) {
+  const { state, isMobile, setOpenMobile, setOpen } = useSidebar();
+  const pathname = pathnameProp ?? '';
 
   React.useEffect(() => {
     if (isMobile) setOpenMobile(false);
   }, [pathname, isMobile, setOpenMobile]);
-  const brandTitle = header?.title?.trim() || 'Dashboard';
-  const brandMonogram = (header?.brandLetter?.trim().charAt(0) || brandTitle.charAt(0) || 'D').toUpperCase();
-  const customBrand = header?.brand;
-
-  const allItems = React.useMemo(
-    () => sidebar.groups.flatMap((g) => g.items),
-    [sidebar.groups],
-  );
-
-  const density = React.useMemo(() => navDensityFromCount(allItems.length), [allItems.length]);
-  const tierNav = DENSITY[density];
-  /** Expanded: follow item-count tier; collapsed rail: fixed `default` sizing so icons stay uniform. */
-  const menuNav = state === 'collapsed' ? RAIL_NAV : tierNav;
 
-  const isActive = React.useCallback(
-    (href: string) => {
-      const matches = pathname === href || pathname.startsWith(`${href}/`);
-      if (!matches) return false;
-      return !allItems.some(
-        (other) =>
-          other.href !== href &&
-          other.href.startsWith(`${href}/`) &&
-          (pathname === other.href || pathname.startsWith(`${other.href}/`)),
-      );
-    },
-    [pathname, allItems],
-  );
-
-  const expanded = state === 'expanded';
-
-  const headerRowClass = cn('flex items-center gap-2', tierNav.headerRowInset);
-  const brandMark = header?.brandIcon ? (
-    <LucideIcon icon={header.brandIcon} className="h-4 w-4 text-sidebar-primary-foreground" />
-  ) : (
-    <span className="text-[11px] font-bold leading-none tracking-tight text-sidebar-primary-foreground">
-      {brandMonogram}
-    </span>
-  );
-
-  const hasMenuStart = sidebar.menuStart != null && sidebar.menuStart !== false;
-  const hasMenuEnd = sidebar.menuEnd != null && sidebar.menuEnd !== false;
-  // Hide slots on the desktop icon rail unless the consumer opted in. Mobile
-  // drawer always shows them — there's no rail in the drawer to begin with.
   const collapsedRail = !isMobile && state === 'collapsed';
-  const showMenuStart =
-    hasMenuStart && (!collapsedRail || sidebar.menuStartShowOnCollapsed === true);
-  const showMenuEnd =
-    hasMenuEnd && (!collapsedRail || sidebar.menuEndShowOnCollapsed === true);
-  const menuStartSlot = showMenuStart ? (
-    <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuStart}</div>
-  ) : null;
-  const menuEndSlot = showMenuEnd ? (
-    <div className="w-full min-w-0 shrink-0 px-2">{sidebar.menuEnd}</div>
-  ) : null;
-
-  const sidebarContentClass = cn('gap-2', menuNav.group);
-
-  const activeIndicator: SidebarActiveIndicator = sidebar.activeIndicator ?? 'background';
-  const groupLabelStyle: SidebarGroupLabelStyle = sidebar.groupLabelStyle ?? 'uppercase';
-  const navButtonClass = cn(navItemBaseClass, ACTIVE_INDICATOR_CLASS[activeIndicator], menuNav.extraButton);
-  const groupLabelUppercaseClass = cn('px-2', menuNav.label);
-  const groupLabelPlainClass = cn(
-    'px-2 text-sm font-semibold text-sidebar-foreground',
-    'h-7 leading-none',
-  );
-  const sidebarGroupClass = cn('gap-0', menuNav.groupPad);
+  const { isHoverExpanded, onMouseEnter, onMouseLeave, setHoverExpanded } = useHoverExpand({
+    enabled: collapsedRail,
+  });
 
-  const renderedGroups = sidebar.groups.map((group) => {
-    if (group.dynamic && group.items.length === 0) return null;
-    return (
-      <SidebarGroupRenderer
-        key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
-        group={group}
-        isActive={isActive}
-        navButtonClass={navButtonClass}
-        sidebarGroupClass={sidebarGroupClass}
-        groupLabelUppercaseClass={groupLabelUppercaseClass}
-        groupLabelPlainClass={groupLabelPlainClass}
-        groupLabelStyle={groupLabelStyle}
-        menuNav={menuNav}
+  return (
+    <PrivateLayoutProvider
+      sidebar={sidebar}
+      header={header}
+      pathname={pathname}
+      isMobile={isMobile}
+      state={state}
+      isHoverExpanded={isHoverExpanded}
+    >
+      <PrivateSidebarInner
+        sidebar={sidebar}
+        header={header}
+        variant={variant}
         collapsedRail={collapsedRail}
+        setHoverExpanded={setHoverExpanded}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       />
-    );
-  });
+    </PrivateLayoutProvider>
+  );
+}
 
-  const featuredSlot = sidebar.featured && !collapsedRail ? (
-    <div className="w-full min-w-0 shrink-0 px-2">
-      <SidebarFeatured config={sidebar.featured} />
-    </div>
-  ) : null;
+// ---------------------------------------------------------------------------
+// Inner component — runs inside PrivateLayoutProvider so useShellVisualState
+// can safely consume the context.
+// ---------------------------------------------------------------------------
 
-  const expandedHeader = (
-    <div className={headerRowClass}>
-      <div className="min-w-0 flex-1">
-        {customBrand != null && customBrand !== false
-          ? typeof customBrand === 'string'
-            ? (
-              <Link
-                href={homeHref}
-                className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
-              >
-                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{customBrand}</span>
-              </Link>
-            )
-            : customBrand
-          : (
-            <Link
-              href={homeHref}
-              className="flex min-w-0 items-center gap-2 rounded-md py-0.5 outline-none ring-sidebar-ring focus-visible:ring-2"
-            >
-              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">{brandMark}</div>
-              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{brandTitle}</span>
-            </Link>
-          )}
-      </div>
-      {!isMobile && <SidebarTrigger className="shrink-0" aria-label="Collapse sidebar" />}
-    </div>
-  );
+interface PrivateSidebarInnerProps {
+  sidebar: SidebarConfig;
+  header?: HeaderConfig;
+  variant: 'sidebar' | 'inset';
+  collapsedRail: boolean;
+  setHoverExpanded: (value: boolean) => void;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}
 
-  const collapsedHeader = (
-    <div className="flex justify-center py-1">
-      <SidebarTrigger aria-label="Expand sidebar" />
-    </div>
+function PrivateSidebarInner({
+  sidebar,
+  header,
+  variant,
+  collapsedRail,
+  setHoverExpanded,
+  onMouseEnter,
+  onMouseLeave,
+}: PrivateSidebarInnerProps) {
+  const layoutVariant = variant === 'inset' ? 'boxed' : 'full-bleed';
+  const { modifiers } = useShellVisualState(layoutVariant);
+  const { setSidebarRef, handleSidebarKeyDown } = useSidebarKeyboard();
+
+  const railExpandHintClass = collapsedRail ? 'cursor-pointer' : undefined;
+
+  /** Click on the collapsed rail acts like a hover — temporary expand, not persistent. */
+  const expandOnRailClick = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const interactive = (event.target as Element | null)?.closest(
+        'a, button, [role="menuitem"], [data-no-expand]',
+      );
+      if (interactive) return;
+      setHoverExpanded(true);
+    },
+    [setHoverExpanded],
   );
 
-  /** Mobile drawer: menu open/close only from the main column trigger — no duplicate toggle in the sheet. */
-  const mobileHeader = (
-    <div className="flex items-center gap-3">
-      <div className="min-w-0 flex-1">
-        {customBrand != null && customBrand !== false
-          ? typeof customBrand === 'string'
-            ? (
-              <Link
-                href={homeHref}
-                className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
-              >
-                <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{customBrand}</span>
-              </Link>
-            )
-            : customBrand
-          : (
-            <Link
-              href={homeHref}
-              className="flex min-w-0 items-center gap-3 rounded-md py-1 outline-none ring-sidebar-ring focus-visible:ring-2"
-            >
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">{brandMark}</div>
-              <span className="truncate text-sm font-semibold tracking-tight text-sidebar-foreground">{brandTitle}</span>
-            </Link>
-          )}
-      </div>
-    </div>
+  const sidebarRootClass = React.useMemo(
+    () =>
+      cn(
+        railExpandHintClass,
+        '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
+        modifiers.sidebarRoot,
+        modifiers.sidebarInner.map((m) => `[&>[data-sidebar=sidebar]]:${m}`),
+      ),
+    [railExpandHintClass, modifiers],
   );
 
-  const sidebarHeaderContent = isMobile ? mobileHeader : expanded ? expandedHeader : collapsedHeader;
-  const footerExtra = sidebar.footer ? <div className="mb-2">{sidebar.footer}</div> : null;
-
-  const sidebarHeaderClass = cn(
-    'pb-2',
-    isMobile
-      ? 'px-4 pb-3 pt-[max(1.25rem,env(safe-area-inset-top,0px))]'
-      : 'px-2 pt-3.5',
+  const sidebarContentClass = React.useMemo(
+    () =>
+      cn(
+        'gap-2',
+        modifiers.sidebarContent,
+      ),
+    [modifiers.sidebarContent],
   );
 
-  /**
-   * Click on the collapsed icon-rail expands the sidebar — but only on empty
-   * areas. Native interactive elements (nav links, the trigger, account menu,
-   * tooltips) keep their original behaviour: we bail out as soon as the click
-   * target sits inside a `button`, `a`, or anything explicitly marked
-   * non-expandable via `data-no-expand`.
-   */
-  const expandOnRailClick = !isMobile && state === 'collapsed'
-    ? (event: React.MouseEvent<HTMLDivElement>) => {
-        const interactive = (event.target as Element | null)?.closest(
-          'a, button, [role="menuitem"], [data-no-expand]',
+  const renderedGroups = React.useMemo(
+    () =>
+      sidebar.groups.map((group) => {
+        if (group.dynamic && group.items.length === 0) return null;
+        return (
+          <SidebarNavGroup
+            key={group.label || `__flat_${group.items.map((i) => i.href).join('|')}`}
+            group={group}
+          />
         );
-        if (interactive) return;
-        setOpen(true);
-      }
-    : undefined;
-
-  const railExpandHintClass =
-    !isMobile && state === 'collapsed' ? 'cursor-pointer' : undefined;
-
-  const sidebarRootClass = cn(
-    railExpandHintClass,
-    '[&>[data-sidebar=sidebar]]:bg-gradient-to-t [&>[data-sidebar=sidebar]]:from-sidebar/85 [&>[data-sidebar=sidebar]]:to-sidebar',
+      }),
+    [sidebar.groups],
   );
 
   return (
     <Sidebar
+      ref={setSidebarRef}
       collapsible="icon"
       variant={variant}
       className={sidebarRootClass}
-      onClick={expandOnRailClick}
+      onClick={collapsedRail ? expandOnRailClick : undefined}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onKeyDown={handleSidebarKeyDown}
     >
-      <SidebarHeader className={sidebarHeaderClass}>{sidebarHeaderContent}</SidebarHeader>
+      <SidebarBrand />
 
       <SidebarContent className={sidebarContentClass}>
-        {menuStartSlot}
+        <SidebarSlots />
         {renderedGroups}
-        {featuredSlot}
-        {menuEndSlot}
       </SidebarContent>
 
       <SidebarFooter className="p-0">
-        {footerExtra}
         <PrivateSidebarAccount header={header} />
       </SidebarFooter>
     </Sidebar>
   );
 }
-
-interface SidebarGroupRendererProps {
-  group: SidebarGroupConfig;
-  isActive: (href: string) => boolean;
-  navButtonClass: string;
-  sidebarGroupClass: string;
-  groupLabelUppercaseClass: string;
-  groupLabelPlainClass: string;
-  groupLabelStyle: SidebarGroupLabelStyle;
-  menuNav: typeof DENSITY[keyof typeof DENSITY];
-  collapsedRail: boolean;
-}
-
-function SidebarGroupRenderer({
-  group,
-  isActive,
-  navButtonClass,
-  sidebarGroupClass,
-  groupLabelUppercaseClass,
-  groupLabelPlainClass,
-  groupLabelStyle,
-  menuNav,
-  collapsedRail,
-}: SidebarGroupRendererProps) {
-  const hasLabel = Boolean(group.label && group.label.trim().length > 0);
-  const isCollapsible = Boolean(group.collapsible) && hasLabel && !collapsedRail;
-  const hideItemIcons = group.hideItemIcons ?? isCollapsible;
-
-  const hasActiveChild = React.useMemo(
-    () => group.items.some((item) => isActive(item.href)),
-    [group.items, isActive],
-  );
-
-  const [open, setOpen] = React.useState<boolean>(
-    isCollapsible ? Boolean(group.defaultOpen) || hasActiveChild : true,
-  );
-
-  React.useEffect(() => {
-    if (isCollapsible && hasActiveChild) setOpen(true);
-  }, [isCollapsible, hasActiveChild]);
-
-  const items = group.items.map((item: SidebarItem) => {
-    const tooltipText = item.tooltip ?? item.label;
-    const itemIcon = !hideItemIcons && item.icon ? (
-      <LucideIcon icon={item.icon} className={menuNav.iconClass} />
-    ) : null;
-    const itemClassName = hideItemIcons
-      ? cn(navButtonClass, 'pl-8')
-      : navButtonClass;
-    const badgeNode = item.badge ? (
-      <SidebarMenuBadge
-        className={item.badgeVariant === 'pill'
-          ? 'bg-primary/15 text-primary px-1.5 rounded-md font-medium'
-          : undefined}
-      >
-        {item.badge}
-      </SidebarMenuBadge>
-    ) : null;
-
-    return (
-      <SidebarMenuItem key={item.href}>
-        <SidebarMenuButton
-          asChild
-          isActive={isActive(item.href)}
-          size={menuNav.buttonSize}
-          tooltip={tooltipText}
-          className={itemClassName}
-        >
-          <Link href={item.href}>
-            {itemIcon}
-            <span>{item.label}</span>
-            {badgeNode}
-          </Link>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    );
-  });
-
-  const labelClass = isCollapsible || groupLabelStyle === 'plain'
-    ? groupLabelPlainClass
-    : groupLabelUppercaseClass;
-
-  if (isCollapsible) {
-    const triggerIcon = group.icon ? (
-      <LucideIcon icon={group.icon} className={cn(menuNav.iconClass, 'shrink-0 text-sidebar-foreground/70')} />
-    ) : null;
-    return (
-      <SidebarGroup className={sidebarGroupClass}>
-        <Collapsible open={open} onOpenChange={setOpen} className="w-full">
-          <CollapsibleTrigger asChild>
-            <button
-              type="button"
-              className={cn(
-                'group/trig flex w-full items-center gap-2 rounded-md px-2 py-1.5',
-                'text-sm font-semibold text-sidebar-foreground',
-                'transition-colors hover:bg-sidebar-accent/40',
-                'data-[no-expand]', // marker so rail-expand click handler ignores it (pattern in PrivateSidebar)
-              )}
-              aria-expanded={open}
-              data-no-expand
-            >
-              {triggerIcon}
-              <span className="flex-1 truncate text-left">{group.label}</span>
-              <ChevronDown
-                className={cn(
-                  'h-4 w-4 shrink-0 text-sidebar-foreground/55 transition-transform duration-200',
-                  open && 'rotate-180',
-                )}
-                aria-hidden
-              />
-            </button>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
-            <SidebarGroupContent>
-              <SidebarMenu className={cn(menuNav.menu, 'mt-1')}>{items}</SidebarMenu>
-            </SidebarGroupContent>
-          </CollapsibleContent>
-        </Collapsible>
-      </SidebarGroup>
-    );
-  }
-
-  return (
-    <SidebarGroup className={sidebarGroupClass}>
-      {hasLabel ? (
-        <SidebarGroupLabel className={labelClass}>{group.label}</SidebarGroupLabel>
-      ) : null}
-      <SidebarGroupContent>
-        <SidebarMenu className={menuNav.menu}>{items}</SidebarMenu>
-      </SidebarGroupContent>
-    </SidebarGroup>
-  );
-}