SingleMenuSidebar
A alternativa enxuta ao MenuSidebar, para aplicações com navegação de um nível: categoria e subitens em sanfona, com uma aberta por vez. Traz seletor de módulo, busca no menu e a conta no rodapé, e recolhe para só ícones.
Menu do módulo
Busque por “grupos” ou “volume”: a sanfona abre sozinha nos resultados. Recolhido, clicar numa categoria expande o menu já nela.
Para assinar
Uso
<SingleMenuSidebar
logo={<BrandLogo variant="symbol" />}
title="z-ui Sign"
categories={[
{ id: "home", label: "Início", icon: LayoutDashboard },
{ id: "envelopes", label: "Envelopes", icon: FileSignature, items: [{ id: "inbox", label: "Para assinar" }] },
]}
activeItemId={current}
onItemClick={navigate}
user={{ name, email, actions: [{ id: "logout", label: "Sair", danger: true }], onAction }}
/>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| logo · title | ReactNode · string | — | Cabeçalho do menu. |
| categories | SingleMenuCategory[] | — | { id, label, icon, href?, items? }. Sem items, a categoria é link. |
| module | { activeId, subtitle?, options, onModuleChange? } | — | Seletor de módulo abaixo do cabeçalho. |
| showSearch | boolean | true | Busca que filtra categorias e subitens, sem diferenciar acentos. |
| activeItemId · defaultActiveItemId · onItemClick | string · (id, event) => void | — | Item ativo. Itens com href viram <a>; intercepte o clique para navegar sem recarregar. |
| expanded · defaultExpanded · onExpandedChange | boolean | true | Largo (256px) ou só ícones (64px). |
| user | { name, email?, subtitle?, avatarUrl?, avatar?, actions?, onAction? } | — | Conta e menu no rodapé. avatarUrl mostra a foto, com as iniciais como reserva; subtitle substitui o e-mail, por exemplo o @login de quem entrou pelo GitHub. |