[Soluções] HTML e CSS: responsividade com mobile-first - Criando o Menu Hambúrguer

1. Estou compartilhando outra ideia para criar um submenu como elementos de tag os expemplo dos codigo.
2. Sobre o elemento Summay e Details na W3C: https://www.w3schools.com/tags/tag_summary.asp
3. Estarei deixando o meu Github com os codigo: https://github.com/lipeomiguel/AluraTools

• HTML Codigo:

<div class="header_left">
    <details>
          <summary><span></span></summary>
          <ul>
            <li><a href="" class="active">Categorias</a></li>
            <li><a href="">PROGRAMAÇÃO</a></li>
            <li><a href="">FRONT-END</a></li>
            <li><a href="">INFRAESTRUTURA</a></li>
            <li><a href="">BUSINESS</a></li>
            <li><a href="">DESIGN & UX</a></li>
          </ul>
    </details>
</div>

• CSS Codigo:

body header .header_left details {
  position: relative;
}
body header .header_left details summary::marker {
  content: none;
}
body header .header_left details summary span {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-block;
  background-image: url("../img/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}
body header .header_left details ul {
  width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: var(--branco-de-fundo);
  position: absolute;
  top: 3.5rem;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
body header .header_left details ul a {
  width: 14rem;
  height: 2.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--cor-header-text);
  font-size: clamp(1.3rem, 2.5vw, 0.9rem);
  font-family: "Roboto" sans-serif;
  text-transform: uppercase;
}

• SCSS Codigo:

.header_left {
      display: flex;
      gap: 1.5rem;
      margin-left: 0.8rem;
      details {
        position: relative;
        summary {
          &::marker {
            content: none;
          }
          span {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-block;
            background-image: url("../img/menu.svg");
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        ul {
          width: 15rem;
          display: flex;
          flex-direction: column;
          align-items: start;
          background-color: var(--branco-de-fundo);
          position: absolute;
          top: 3.5rem;
          left: 0;
          display: flex;
          flex-direction: column;
          gap: 0.3rem;
          a {
            width: 14rem;
            height: 2.7rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: var(--cor-header-text);
            font-size: clamp(1.3rem, 2.5vw, 0.9rem);
            font-family: "Roboto" sans-serif;
            text-transform: uppercase;
          }
        }
      }
    }