MenuSidebar
Menu de duas colunas para aplicações com várias áreas. O trilho de 64px troca a área (Envelopes, Modelos, Contatos…); o painel de 256px mostra os itens dela, com contagem, subitens e uma seção de favoritos.
Menu da conta
Recolhido, sobra só o trilho; com expandOnHover, passar o mouse abre o painel por cima do conteúdo sem empurrá-lo.
Visão geral
Uso
<MenuSidebar
contexts={[
{
id: "envelopes",
label: "Envelopes",
icon: FileSignature,
items: [
{ id: "inbox", label: "Para assinar", icon: Inbox, badge: 4 },
{ id: "folders", label: "Pastas", icon: FolderOpen, subitems: [ … ] },
],
bookmarks: { title: "Favoritos", items: [{ id: "f1", label: "Contratos 2026", color: "var(--color-signer-1)" }] },
},
]}
activeItemId={current}
onItemClick={(item) => router.push(item.href)}
collapsed={collapsed}
/>Props
MenuSidebarItem = { id, label, icon?, href?, badge?, subitems?, defaultOpen? }.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| contexts | MenuSidebarContext[] | — | { id, label, icon, description?, items, bookmarks? }. |
| activeContextId · defaultActiveContextId · onContextChange | string · (id) => void | — | Área ativa no trilho. |
| activeItemId · defaultActiveItemId · onItemClick | string · (item, event) => void | — | Item ativo. Com href o item vira <a>; para não recarregar a página, intercepte o clique com routeClick e navegue pelo roteador. |
| collapsed | boolean | false | Só o trilho. Quem controla é o cabeçalho ou o AppShell. |
| expandOnHover | boolean | true | Recolhido, abre o painel por cima no hover ou ao trocar de área. |
| brand · user | ReactNode | — | Topo e base do trilho. |