Sidebar Y2Sidebar

Modo 1 - Fixed mode="fixed"

Sidebar sempre visível. Sem botão de fechar. Ideal para painéis admin onde o menu é permanente.

Modo 2 - Toggle mode="toggle"

Sidebar oculta por padrão. Um botão externo a abre e fecha. Ideal para mobile ou telas compactas. Suporta overlay e tecla Esc.

Modo 3 - Collapse mode="collapse"

Sidebar com seta interna que alterna entre expandida (ícone + texto) e colapsada (só ícones). Use y2-sidebar-start para definir o estado inicial.

Iniciando aberta y2-sidebar-start="open"

Iniciando colapsada y2-sidebar-start="icons"

Modo 4 - Hover mode="hover"

Sempre visível, mas mostra apenas ícones. Ao passar o mouse, expande automaticamente. Ao tirar, volta a mostrar só ícones.

Submenu y2-sidebar-sub

Item pai que ao clicar expande/colapsa subitens. Funciona em qualquer modo. Quando a sidebar está colapsada (só ícones), o submenu fica oculto automaticamente.

API JavaScript

// Abrir sidebar (remove [hid]) - modo toggle
Y2Sidebar.open('#meu-menu');
Y2Sidebar.open(document.querySelector('[y2-sidebar]'));

// Fechar sidebar (adiciona [hid]) - modo toggle
Y2Sidebar.close('#meu-menu');

// Eventos disparados automaticamente
sdb.addEventListener('yd:sidebar:open',    () => {});
sdb.addEventListener('yd:sidebar:close',   () => {});
sdb.addEventListener('yd:sidebar:toggle',  () => {}); // collapse: expandiu/colapsou
sdb.addEventListener('yd:sidebar:submenu', e => {
    console.log(e.detail.open);   // true = abriu, false = fechou
    console.log(e.detail.trigger); // o item pai clicado
    console.log(e.detail.items);   // o container de subitens
});