<div class="p-6 overflow-hidden overflow-y-auto">
  <aside>
    <h3 class="text-xl mb-4"><a href="#">FUNDAMENTOS DO HTML</a></h3>
    <ul>
      <li class="toogle mb-2">
        <details>
          <summary>Introdução</summary>
          <ol>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Estrutura Básica</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#semantica-html"
                >Semântica HTML</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Títulos</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Paragrafos</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Textos</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Listas</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Links</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Âncoras</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Imagens</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Urls</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Tabelas</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Formulários</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Botões</a
              >
            </li>
          </ol>
        </details>
      </li>
      <li class="toogle mb-2">
        <details>
          <summary>Estilização com CSS</summary>
          <ol class="">
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Introdução</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Estrutura Básica</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Regras</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Cores</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Backgrouns</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Textos</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Fontes</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Bordas</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Sombras</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Margens</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Altura e Largura</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Display e Visibilidade</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Opacidade</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Transformações</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Transições</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Animações</a
              >
            </li>
          </ol>
        </details>
      </li>
      <li class="toogle mb-2">
        <details>
          <summary>Aplicando JavaScript no HTML</summary>
          <ol class="">
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#introducao"
                >Introdução</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Estrutura Básica</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Variáveis</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Operadores</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Controle de fluxo</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Objectos</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Funções</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Arrays</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Strings</a
              >
            </li>
            <li>
              <a
                class="links block px-4 py-1 transition hover:pl-5 hover:border-l-2 hover:border-indigo-400 hover:bg-indigo-200"
                href="#"
                >Eventos</a
              >
            </li>
          </ol>
        </details>
      </li>
    </ul>
  </aside>
</div>
<script>
  const links = document.querySelectorAll(".links");
  const url = document.location.hash;

  links.forEach((link) => {
    link.addEventListener("click", () => {
      links.forEach((l) => l.classList.remove("active"));
      link.classList.add("active");
    });
  });
  link.classList.remove("active");
</script>
