ContextualSidebar

export function ContextualSidebarMatrix() {
  const [activeId, setActiveId] = useState('mi-franquicia/pedidos')
  const [collapsed, setCollapsed] = useState(false)

  const sections: ContextualSidebarSection[] = [
    {
      id: 'novedades',
      label: 'Novedades',
      collapsible: false,
      icon: <IconSparkles className="h-4 w-4" />,
      content: [
        { type: 'item', item: { id: 'novedades', label: 'Novedades', icon: <IconSparkles className="h-4 w-4" /> } },
      ],
    },
    {
      id: 'mi-franquicia',
      label: 'Mi franquicia',
      icon: <IconHome className="h-4 w-4" />,
      decorativeAccent: 'accent-1',
      content: [
        { type: 'item', item: { id: 'mi-franquicia/tablero', label: 'Tablero', icon: <IconGrid className="h-4 w-4" /> } },
        {
          type: 'item',
          item: {
            id: 'mi-franquicia/pedidos',
            label: 'Pedidos',
            icon: <IconInbox className="h-4 w-4" />,
            badge: 3,
            badgeTone: 'warning',
          },
        },
        {
          type: 'item',
          item: {
            id: 'mi-franquicia/reclamos',
            label: 'Reclamos',
            icon: <IconBell className="h-4 w-4" />,
            badge: 1,
            badgeTone: 'error',
          },
        },
      ],
    },
    {
      // Sin `decorativeAccent`: «Productos usa primary (marca, sin slot)»
      // — comentario textual de `module-menu-comercial.ts:26`.
      id: 'productos',
      label: 'Productos',
      icon: <IconGrid className="h-4 w-4" />,
      items: [
        { id: 'productos/catalogo', label: 'Catálogo', icon: <IconGrid className="h-4 w-4" /> },
        { id: 'productos/precios', label: 'Precios', icon: <IconChart className="h-4 w-4" /> },
      ],
    },
    {
      id: 'rrhh',
      label: 'RRHH',
      icon: <IconTeam className="h-4 w-4" />,
      decorativeAccent: 'accent-5',
      items: [
        { id: 'rrhh/personas', label: 'Personas', icon: <IconTeam className="h-4 w-4" /> },
        { id: 'rrhh/puestos', label: 'Puestos', icon: <IconClipboard className="h-4 w-4" /> },
        { id: 'rrhh/organigrama', label: 'Organigrama', icon: <IconNetwork className="h-4 w-4" /> },
      ],
    },
    {
      // Comparte `accent-5` con RRHH — decisión de Martín, 2026-09-01.
      id: 'academia',
      label: 'Academia',
      icon: <IconBook className="h-4 w-4" />,
      decorativeAccent: 'accent-5',
      items: [
        { id: 'academia/cursos', label: 'Cursos', icon: <IconBook className="h-4 w-4" /> },
        { id: 'academia/conocimiento', label: 'Sobre Luigi', icon: <IconLightbulb className="h-4 w-4" /> },
      ],
    },
    {
      id: 'red',
      label: 'Locales',
      icon: <IconNetwork className="h-4 w-4" />,
      decorativeAccent: 'accent-6',
      items: [
        { id: 'red/franquicias', label: 'Locales', icon: <IconHome className="h-4 w-4" /> },
        { id: 'red/pedidos', label: 'Pedidos', icon: <IconInbox className="h-4 w-4" />, badge: 7, badgeTone: 'warning' },
      ],
    },
    {
      // Comparte `accent-6` con Locales — el techo de 6 no se mueve.
      id: 'finanzas',
      label: 'Finanzas',
      icon: <IconChart className="h-4 w-4" />,
      decorativeAccent: 'accent-6',
      items: [
        { id: 'finanzas/cobros', label: 'Cobros', icon: <IconChart className="h-4 w-4" /> },
        { id: 'finanzas/facturacion', label: 'Facturación', icon: <IconClipboard className="h-4 w-4" /> },
      ],
    },
  ]

  return (
    <Stage label="ContextualSidebar · el menú del admin de Luigi — badges que suben al acordeón cerrado, acentos repetidos, footer con el menú de cuenta" tall wide>
      <div className="flex flex-col items-center gap-2 px-1 py-1">
        <BrowserFrame productName="luigi-admin" className="w-[340px]">
          <div className="h-[460px] overflow-hidden">
            <ContextualSidebar
              sections={sections}
              activeItemId={activeId}
              onNavigate={(item) => setActiveId(item.id)}
              decorativeGlow={false}
              sectionBadgeRollup
              header={
                <div className="flex w-full items-center justify-between gap-2">
                  <span className="text-sm font-semibold text-content">Luigi</span>
                  <IconBell className="h-4 w-4 text-content/50" />
                </div>
              }
              headerHeightClass="h-[62px]"
              backTo={{ label: 'Volver al hub', onBack: () => {} }}
              footer={
                <SidebarUserMenu
                  user={{ name: 'Rocío Peralta', email: 'rocio@luigi.com.ar' }}
                  collapsed={collapsed}
                  items={[
                    { id: 'perfil', icon: <IconUser className="h-4 w-4" />, label: 'Perfil' },
                    { id: 'seguridad', icon: <IconShield className="h-4 w-4" />, label: 'Seguridad' },
                  ]}
                  onLogout={() => {}}
                  themeToggle={<ThemeToggle variant="full" />}
                />
              }
              collapsed={collapsed}
              onCollapsedChange={setCollapsed}
              className="h-full"
            />
          </div>
        </BrowserFrame>
        <p className="max-w-[440px] text-center text-[11px] text-content/60">
          Con el acordeón cerrado, «Mi franquicia» y «Locales» muestran la suma de los badges de
          sus hojas; al abrirlos desaparece, porque abajo está el del hijo. Eso es
          `sectionBadgeRollup`, y no cuesta ninguna consulta extra.
        </p>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · ContextualSidebarMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.