SidebarNavigation

export function SidebarNavigationMatrix() {
  const [activoDietaly, setActivoDietaly] = useState('datos')
  const [activoZentrya, setActivoZentrya] = useState('comms-whatsapp')

  /** `NAV_ITEMS` de `EmpresaClient.tsx:51-55` — la forma plana, sin grupos. */
  const navItems: SidebarNavItem[] = MODULOS_EMPRESA.map((m) => ({
    id: m.id,
    label: m.label,
    icon: m.icon,
  }))

  /** `CHANNEL_LEVEL_CHILD_GROUPS` de `admin-nav-data.ts:116-155`. */
  const canales: SidebarNavChildGroup[] = [
    {
      title: 'CANALES',
      items: [
        { id: 'comms-whatsapp', label: 'WhatsApp', icon: IconWhatsApp },
        { id: 'comms-webchat', label: 'Chat web', icon: IconGlobe },
        { id: 'comms-mail', label: 'Mail', icon: IconMail, disabled: true, badge: 'Pronto' },
        { id: 'comms-chat-interno', label: 'Chat interno', icon: IconChat, disabled: true, badge: 'Pronto' },
        { id: 'comms-instagram', label: 'Instagram', icon: IconInstagram, disabled: true, badge: 'Pronto' },
        { id: 'comms-meetings', label: 'Meetings', icon: IconVideo, disabled: true, badge: 'Pronto' },
      ],
    },
  ]

  /** `mainItems` de `admin-nav-data.ts:226-280`. */
  const zentryaGroups: SidebarNavGroup[] = [
    {
      items: [
        { id: 'dashboard', label: 'Dashboard', icon: IconHome },
        { id: 'comms', label: 'Mensajería', icon: IconComms, childGroups: canales },
        { id: 'growth', label: 'Growth', icon: IconTarget },
        { id: 'blog', label: 'Blog', icon: IconBook },
        { id: 'seo', label: 'SEO', icon: IconRocket },
        {
          id: 'social',
          label: 'Redes',
          icon: IconInstagram,
          childGroups: [
            {
              title: '',
              items: [
                { id: 'social-publisher', label: 'Publicador', icon: IconRocket },
                { id: 'social-calendar', label: 'Calendario', icon: IconBook },
                { id: 'social-inbox', label: 'Inbox', icon: IconChat },
                { id: 'social-ai', label: 'Community AI', icon: IconLightning },
              ],
            },
          ],
        },
        { id: 'public-site', label: 'Sitio público', icon: IconExternalLink },
      ],
    },
  ]

  return (
    <Stage label="SidebarNavigation · boxed + items planos (Dietaly) vs plain + childGroups (Zentrya)" tall wide>
      <div className="flex w-full flex-wrap items-start justify-center gap-6 px-1 py-1">
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            boxed · items planos — y su reemplazo móvil, que es otro componente
          </span>
          <BrowserFrame productName="dietaly" className="w-[320px]">
            <div className="flex h-[360px] flex-col gap-3 overflow-hidden p-3">
              {/* La tira de `Tabs` que el vertical monta con `lg:hidden`. Acá
                  va SIEMPRE visible, arriba, para que se vea que el sidebar y
                  la tira son el mismo menú en dos formas. */}
              <div className="-mx-1 px-1">
                <Tabs items={TABS_ITEMS} active={activoDietaly} onChange={setActivoDietaly} variant="underline" size="sm" />
              </div>
              <div className="min-h-0 flex-1 overflow-hidden">
                <SidebarNavigation
                  items={navItems}
                  activeItemId={activoDietaly}
                  onItemClick={(item) => setActivoDietaly(item.id)}
                  className="h-full"
                />
              </div>
            </div>
          </BrowserFrame>
        </div>

        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            plain · childGroups — «Mensajería» y «Redes» se despliegan; badge acepta string
          </span>
          <BrowserFrame productName="zentrya" className="w-[300px]">
            <div className="h-[360px] overflow-hidden">
              <SidebarNavigation
                groups={zentryaGroups}
                activeItemId={activoZentrya}
                onItemClick={(item) => setActivoZentrya(item.id)}
                appearance="plain"
                header={{ title: 'Zentrya', subtitle: 'Empresa activa' }}
                className="h-full"
              />
            </div>
          </BrowserFrame>
        </div>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · SidebarNavigationMatrix: 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.