Drawer Hamburger

<button type="button" class="nuda-hamb nuda-hamb--open"
        aria-label="Toggle menu" aria-expanded="true">
  <span class="nuda-hamb__bar"></span>
  <span class="nuda-hamb__bar"></span>
  <span class="nuda-hamb__bar"></span>
</button>

/* Drawer Hamburger
   3-line button that morphs to an X when open.
   Customize: --hamb-bg, --hamb-color */

.nuda-hamb {
  --hamb-bg: #111114;
  --hamb-color: #fafafa;
  appearance: none;
  width: 48px;
  height: 48px;
  background: var(--hamb-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

.nuda-hamb:hover { background: #1a1a20; }

.nuda-hamb__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hamb-color);
  border-radius: 2px;
  transform-origin: center;
}

/* Toggle ".nuda-hamb--open" in JS to morph. The keyframes below
   loop the morph for demo purposes. */
.nuda-hamb--open .nuda-hamb__bar:nth-child(1) {
  animation: nuda-hamb-top 3.4s ease-in-out infinite;
}
.nuda-hamb--open .nuda-hamb__bar:nth-child(2) {
  animation: nuda-hamb-mid 3.4s ease-in-out infinite;
}
.nuda-hamb--open .nuda-hamb__bar:nth-child(3) {
  animation: nuda-hamb-bot 3.4s ease-in-out infinite;
}

@keyframes nuda-hamb-top {
  0%, 25% { transform: translateY(0) rotate(0); }
  45%, 80% { transform: translateY(7px) rotate(45deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes nuda-hamb-mid {
  0%, 25% { opacity: 1; transform: scaleX(1); }
  45%, 80% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes nuda-hamb-bot {
  0%, 25% { transform: translateY(0) rotate(0); }
  45%, 80% { transform: translateY(-7px) rotate(-45deg); }
  100% { transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-hamb--open .nuda-hamb__bar { animation: none; }
}