Lumina

Pattern · Lumina

Sidebar Lumina

Sidebar com agrupamento por escopo, item ativo em primary/[0.08], collapsible em ícone-only. Padrão usado neste site, no portal, na própria Lola.

Onde já está vivo

A sidebar da esquerda agora mesmo. Olha pra ela enquanto lê esta página.

Receita completa

Hierarquia: grupos (eyebrow uppercase 10px tracking 0.16em) + items (rounded-[10px] com bg-primary/[0.08] no ativo).

components/sidebar.tsxTSX

Tokens

  • Largura: w-64 (16 rem) expandida.
  • Border-right: border-border/40 (40% opacity, mal aparece).
  • Group label: classe .eyebrow (10px, uppercase, tracking 0.16em, muted).
  • Item: rounded-[10px], px-2 py-1.5.
  • Item ativo: bg-primary/[0.08] + text-primary + font-medium.
  • Sticky top: top-20 (header é h-14, 20 cobre + margem).

Variantes

  • Padrão: como aqui, com grupos visíveis.
  • Collapsible: usar o SidebarProvider + SidebarTrigger do @nimbuslab/lumina/components/sidebar.
  • Mobile: vira drawer pela esquerda. Trigger no header (hamburger).