<aside> 💡

Para criar uma aba lateral de forma simples, adicione o seguinte HTML a onde desejar que o botão da aba apareça:

</aside>

<div class="caixa">
  <label class="aba-lateral-botao" for="aba-lateral-input">
    <span>aqui vai um svg</span>
  </label>
  <input type="checkbox" id="aba-lateral-input">
  <div class="aba-lateral-conteudo">
    <label class="aba-lateral-botao-fechar" for="aba-lateral-input">
      <span>fechar</span>
    </label>
    aqui vai o conteudo
  </div>
</div>

O elemento "caixa" será a div que agrupará o botão e a barra lateral;

O label com a classe "aba-lateral-botao" e o input servem como botão para saber quando a barra lateral deverá aparecer;

O span dentro do label, servirá para colocar o SVG do botão ou o texto que será clicado para fazer a barra lateral aparecer;

O label "aba-lateral-botao-fechar" indicará o botão de fechar, podendo ser substituído por um SVG;

O input deverá ter um display none, ele servirá apenas para a div de conteúdo entender que o botão foi clicado.

<aside> 💡

Siga o código de css abaixo:

</aside>

#aba-lateral-input {
  display: none;
}

Todo CSS poderá ser adicionado em folha.css ou a um modulo personalizado criado no CLI usando o comando "ws mod".

<aside> 💡

A div "aba-lateral-conteudo" é onde ficará o conteúdo da sua barra lateral, e deverá ter as seguintes propriedades CSS:

</aside>

.caixa .aba-lateral-conteudo {
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
  width: 40rem;
  z-index: 10;
  background-color: red;
  transition: 300ms;
  transform: translateX(100%);
}

Para alterar entre esquerda e direita, basta remover o right e mudar para left: 0;