Menu Morph

<button class="nuda-menu-morph" aria-label="Menu" aria-expanded="false">
  <span class="nuda-menu-morph__line"></span>
  <span class="nuda-menu-morph__line"></span>
  <span class="nuda-menu-morph__line"></span>
</button>

/* Menu Morph
   Hamburger morphs to X on toggle.
   Customize: --menu-color */

.nuda-menu-morph {
  --menu-color: #fff;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.nuda-menu-morph__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--menu-color);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center;
  will-change: transform, opacity;
}

.nuda-menu-morph[aria-expanded="true"] .nuda-menu-morph__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nuda-menu-morph[aria-expanded="true"] .nuda-menu-morph__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nuda-menu-morph[aria-expanded="true"] .nuda-menu-morph__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-menu-morph__line { transition: none; }
}

/* Menu Morph — vanilla JS
   Toggles hamburger to X. */

(function () {
  document.querySelectorAll(".nuda-menu-morph").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var expanded = btn.getAttribute("aria-expanded") === "true";
      btn.setAttribute("aria-expanded", String(!expanded));
    });
  });
})();