ryangittings · October 16, 2025 12:32
diff --git a/menu-toggle.css b/menu-toggle.css
 menu-toggle button {
  background: none;
  padding: 0;
  border: none;
  cursor: pointer;
  color: currentColor;
 }

 menu-toggle button svg {
  width: 2em;
 }

 menu-toggle button svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: 0.2s var(--ease-default);
  transition-property: transform, opacity;
 }

 menu-toggle button[aria-expanded="true"] svg path:first-child {
  transform: translateY(5px) rotate(45deg);
 }

 menu-toggle button[aria-expanded="true"] svg path:nth-child(2) {
  opacity: 0;
 }

 menu-toggle button[aria-expanded="true"] svg path:last-child {
  transform: translateY(-5px) rotate(-45deg);
 }
diff --git a/menu-toggle.js b/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);
diff --git a/menu.html b/menu.html
 <menu-toggle class="flex flex-wrap items-center justify-between gap-s">
  <button type="button" class="lg:hidden" aria-label="Toggle main menu" aria-controls="menu">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
      <!-- Top line -->
      <path d="M3.75 6.75h16.5" stroke-linecap="round" stroke-linejoin="round"></path>
      <!-- Middle line -->
      <path d="M3.75 12h16.5" stroke-linecap="round" stroke-linejoin="round"></path>
      <!-- Bottom line -->
      <path d="M3.75 17.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button>

  <nav id="menu" class="hidden basis-full lg:block lg:basis-auto [menu-toggle:has([aria-expanded=true])_&]:block" aria-label="Main menu">
    <ul role="list">
      {% for item in collections.all | eleventyNavigation %}
        <li>
          <a href="{{ item.url }}" class="block no-underline">{{ item.title }}</a>
        </li>
      {% endfor %}
    </ul>
  </nav>
 </menu-toggle>
No results found