Sidebar [sw-sidebar]
Menu lateral com 4 modos de comportamento — fixo, toggle (drawer com overlay), colapsável (só ícones) e hover — cabeçalho com marca, grupos, submenus em accordion e estado ativo automático ao clicar.
1. Fixed mode="fixed"
Sempre visível, sem botão de fechar — ideal pra painéis admin onde o menu é permanente.
2. Toggle mode="toggle" (padrão)
Sidebar oculta por padrão — abre como drawer real sobre a página, com overlay que fecha ao clicar fora ou ESC. Clique no botão abaixo pra testar de verdade.
3. Collapse mode="collapse"
Clique no ícone da marca no cabeçalho pra alternar entre expandida (ícone + texto) e colapsada (só ícones, centralizado). Use sw-sidebar-start="icons" pra começar já colapsada.
4. Hover mode="hover"
Começa colapsada (só ícones) e expande automaticamente ao passar o mouse por cima — sem clique nenhum.
5. Submenu sw-sidebar-sub
Item pai com sw-sidebar-sub + seta sw-sidebar-arrow, seguido do irmão sw-sidebar-sub-items com os subitens. Clique em "Configurações" pra expandir.
Referência
| Atributo | Elemento | Descrição |
|---|---|---|
sw-sidebar-mode | aside | toggle (padrão) · fixed · collapse · hover |
sw-sidebar-start | aside | No modo collapse: open | icons — estado inicial. |
[hid] | aside | Esconde a sidebar (modo toggle). |
[col] | aside | Colapsa pra só ícones (modo collapse/hover) — adicionado automaticamente pelo JS. |
sw-sidebar-hdr | div | Cabeçalho com marca — opcional. |
sw-sidebar-hdr-ico / -ttl | i / span | Ícone e título da marca no cabeçalho. |
sw-sidebar-hdr-ico | i | Ícone da marca — no modo collapse, clicar nele alterna colapsado/expandido. |
sw-sidebar-tgl | button | Botão dedicado opcional pra alternar colapsado/expandido (modo collapse) — some sozinho quando colapsada, já que o ícone da marca cobre a mesma função. |
sw-sidebar-mn | nav | Container da navegação. |
sw-sidebar-grp-ttl | span | Título de grupo/seção dentro do menu. |
sw-sidebar-it | a | Item de navegação — clique marca como ativo automaticamente. |
[act] | [sw-sidebar-it] | Marca o item como ativo (pode vir no HTML ou ser setado pelo clique). |
sw-sidebar-lbl | span | Texto do item — some sozinho quando a sidebar colapsa. |
sw-sidebar-sub + sw-sidebar-arrow | a / i | Item pai com submenu — a seta gira ao abrir. |
sw-sidebar-sub-items | div | Container dos subitens — irmão seguinte do item pai. |
sw-sidebar-open="#id" | button | Botão externo que abre/fecha a sidebar de id. |
sw-sidebar-ovl | div | Overlay — fecha a sidebar ao clicar fora (modo toggle). |
sw:sidebar:open / :close / :toggle / :submenu | evento | Disparados pelo componente. |
SW.Sidebar.open(sel) / .close(sel) | JS | API programática. |