Sidebar Componentes

O que é

É o menu da esquerda que todo sistema/painel tem: "Painel", "Agenda", "Clientes", "Financeiro"… O SWCore monta com atributos: sw-sidebar no <aside>, sw-sidebar-hdr no cabeçalho, sw-sidebar-mn na lista, sw-sidebar-it em cada item e sw-sidebar-lbl no texto do item. Um único atributo, sw-sidebar-mode, escolhe o comportamento: collapse (botão recolhe para só ícones), rail (sempre só ícones), hover (abre quando o mouse passa), toggle (sai por cima do conteúdo, bom no celular) ou fixed (sempre aberta).

A sidebar é presa na lateral esquerda da tela, de cima a baixo (26 rem de largura). O JavaScript do núcleo escreve o estado dela como atributo: col = só ícones (7,2 rem), bar = barrinha fina (1,8 rem), hid = escondida. O CSS esconde textos, títulos de grupo e submenus conforme o estado. O estado atual também fica em data-sidebar-state (open, col ou bar). Clicar num item marca ele como atual (act) sozinho. Nos quadros abaixo a sidebar está dentro de uma caixa só para caber na página.

Quando usar

• Painel admin / sistema: menu principal com as áreas (Agenda, Clientes, Financeiro, Configurações).
• Área do cliente com várias seções (Pedidos, Endereços, Dados).
• Documentação — o menu à esquerda desta página é uma sidebar.
• Para o menu do topo de um site, use a Navbar.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O segundo CSS traz os ícones swi-* dos itens.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Monte o <aside> com cabeçalho e itens (ícone + texto). O botão com sw-sidebar-tgl na borda recolhe e abre. Clique na setinha.

   <aside sw-sidebar sw-sidebar-mode="collapse">
     <button sw-sidebar-tgl aria-label="Recolher menu"><i class="swi-chevron-left"></i></button>
     <div sw-sidebar-hdr><i sw-sidebar-hdr-ico class="swi-cut"></i><span sw-sidebar-hdr-ttl>Barbearia</span></div>
     <nav sw-sidebar-mn>
       <a sw-sidebar-it act href="#"><i class="swi-home"></i><span sw-sidebar-lbl>Painel</span></a>
       <a sw-sidebar-it href="#"><i class="swi-calendar"></i><span sw-sidebar-lbl>Agenda</span></a>
       <a sw-sidebar-it href="#"><i class="swi-group"></i><span sw-sidebar-lbl>Clientes</span></a>
       <a sw-sidebar-it href="#"><i class="swi-wallet"></i><span sw-sidebar-lbl>Caixa</span></a>
     </nav>
   </aside>

3. 3

   A sidebar fica por cima da página, presa na esquerda. Empurre o conteúdo para o lado com uma margem do mesmo tamanho (a página não faz isso sozinha).

   <main class="conteudo">…</main>
   
   <style>
     .conteudo { margin-left: 26rem; transition: margin-left .3s; }
     /* quando recolher para só ícones */
     [data-sidebar-state="col"] ~ .conteudo { margin-left: 7.2rem; }
   </style>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<aside sw-sidebar sw-sidebar-mode="collapse" id="menu">
  <button sw-sidebar-tgl aria-label="Recolher menu"><i class="swi-chevron-left"></i></button>
  <div sw-sidebar-hdr><i sw-sidebar-hdr-ico class="swi-dumbbell"></i><span sw-sidebar-hdr-ttl>Academia Forte</span></div>
  <nav sw-sidebar-mn>
    <a sw-sidebar-it act href="/admin"><i class="swi-home"></i><span sw-sidebar-lbl>Painel</span></a>
    <span sw-sidebar-grp-ttl>Alunos</span>
    <a sw-sidebar-it href="/admin/matriculas"><i class="swi-group"></i><span sw-sidebar-lbl>Matrículas</span></a>
    <a sw-sidebar-it sw-sidebar-sub href="#"><i class="swi-calendar"></i><span sw-sidebar-lbl>Aulas</span><i class="swi-chevron-right" sw-sidebar-arrow></i></a>
    <div sw-sidebar-sub-items>
      <a sw-sidebar-it href="/admin/aulas/musculacao"><span sw-sidebar-lbl>Musculação</span></a>
      <a sw-sidebar-it href="/admin/aulas/funcional"><span sw-sidebar-lbl>Funcional</span></a>
    </div>
    <span sw-sidebar-grp-ttl>Gestão</span>
    <a sw-sidebar-it href="/admin/mensalidades"><i class="swi-wallet"></i><span sw-sidebar-lbl>Mensalidades</span></a>
  </nav>
  <div sw-sidebar-ftr><a sw-sidebar-it href="/sair"><i class="swi-log-out"></i><span sw-sidebar-lbl>Sair</span></a></div>
</aside>

<main class="conteudo">…</main>

<aside sw-sidebar sw-sidebar-mode="collapse" id="menu">…</aside>

<script>
  // ANTES do swcore.min.js: nasce do jeito que a pessoa deixou da última vez
  const menu = document.getElementById('menu');
  if (localStorage.getItem('menu') === 'col') menu.setAttribute('sw-sidebar-start', 'icons');

  // guarda a escolha a cada clique na setinha
  menu.addEventListener('sw:sidebar:state', (e) => {
    localStorage.setItem('menu', e.detail.state);   // "open" ou "col"
  });
</script>
<script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

<header class="topo">
  <button type="button" sw-btn="ghost rnd" sw-sidebar-open="#menu" aria-label="Abrir menu"><i class="swi-menu"></i></button>
</header>

<div sw-sidebar-ovl></div>
<aside sw-sidebar sw-sidebar-mode="toggle" id="menu" hid>…</aside>

<script>
  // abrir e fechar por código (ex.: depois de escolher um item)
  SW.Sidebar.open('#menu');
  SW.Sidebar.close('#menu');
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js — a sidebar e os modos.
• swcore.compl.min.css — os ícones swi-* dos itens (sem eles, o modo só-ícones fica vazio).

Cuidados — erros comuns

• Esquecer que ela fica por cima: sem margem no conteúdo, o texto da página fica escondido atrás do menu. Veja o passo 3 do "Comece aqui".
• Item sem ícone: quando a sidebar recolhe para só ícones, ele fica vazio. Todo item do primeiro nível precisa de <i class="swi-…">.
• Texto do item fora do <span sw-sidebar-lbl>: ele não some ao recolher e estoura a largura.
• Colocar o sw-sidebar-sub-items dentro do item: ele vem logo depois do <a sw-sidebar-sub>, como irmão.
• Mais de uma sidebar com cortina: dê a cada uma a sua (sw-sidebar-ovl="#menu", sw-sidebar-ovl="#filtros"). Sem valor, a cortina é a geral e serve a quem não tem cortina própria.
• Esperar que o submenu abra com a sidebar recolhida (só ícones): de propósito ele não abre — não há espaço.

O que ele não faz

• Fica sempre do lado esquerdo; não há opção de lado direito.
• Não empurra o conteúdo da página sozinha — a margem é por sua conta (use data-sidebar-state).
• Não guarda sozinha a preferência de recolhida/aberta (veja a receita com localStorage).
• No modo collapse não existe função JS para recolher/abrir; use o clique no sw-sidebar-tgl.