<menu-toggle>

default.njk

  <menu-toggle class="menu-toggle">
      <button class="[ menu-toggle__button ] [ lg:hidden ]" aria-label="Toggle menu"><span></span></button>

      <nav class="hidden lg:block" aria-label="Primary navigation">
        <ul class="flex items-center gap-s flex-col lg:flex-row" role="list">
          {%- for entry in collections.all | eleventyNavigation %}
            {% if entry.title %}
              <li><a href="{{ entry.url | url }}"{% if entry.url == page.url or entry.url in page.url and entry.url != '/' %} data-active{% endif %}>{{ entry.title }}</a></li>
            {% endif %}
          {%- endfor %}
        </ul>
      </nav>
  </menu-toggle>

menu-toggle.css

.menu-toggle__button {
  --menu-toggle-gap: 0.25em;
  --menu-toggle-thickness: 2px;
  --menu-toggle-offset: calc(var(--menu-toggle-gap) + var(--menu-toggle-thickness));

  width: var(--menu-toggle-offset);

  position: relative;
  width: 2em;
  gap: var(--menu-toggle-gap);
  display: inline-flex;
  flex-direction: column;
  color: currentColor;
  border: none;
  padding: 0.5em;
  padding-right: 0;
  cursor: pointer;
  margin-left: auto;
  background: none;
}

.menu-toggle__button span,
.menu-toggle__button:before,
.menu-toggle__button:after {
  width: 100%;
  height: var(--menu-toggle-thickness);
  background: currentColor;
  display: block;
  transition: 0.2s var(--ease-default);
  transition-property: transform, width;
  border-radius: var(--radius-full);
}

.menu-toggle__button:before,
.menu-toggle__button:after {
  content: '';
}

.menu-toggle__button[aria-expanded='true'] span {
  transform: scale(0);
}

.menu-toggle__button[aria-expanded='true']:before {
  transform: translateY(var(--menu-toggle-offset)) rotate(45deg);
  width: 100%;
}

.menu-toggle__button[aria-expanded='true']:after {
  transform: translateY(calc(var(--menu-toggle-offset) * -1)) rotate(-45deg);
  width: 100%;
}

.menu-toggle[open] nav {
  display: block !important;
}

.no-js .menu-toggle__button {
  display: none;
}

.no-js .menu-toggle nav {
  display: flex;
}

menu-toggle.js

class MenuToggle extends HTMLElement {
  constructor() {
    super();

    this.toggleMenu = this.toggleMenu.bind(this);
    this.button = this.querySelector('button');
  }

  connectedCallback() {
    this.button.addEventListener('click', this.toggleMenu);
  }

  toggleMenu() {
    const open = this.button.getAttribute('aria-expanded') == 'true';

    if (open) {
      this.button.setAttribute('aria-expanded', false);
      this.removeAttribute('open');
    } else {
      this.button.setAttribute('aria-expanded', true);
      this.setAttribute('open', true);
    }
  };
}

window.customElements.define('menu-toggle', MenuToggle);