Navbar Fullscreen Overlay

<!-- Open state. In production: fixed inset-0, starts hidden (opacity-0 invisible), toggled via JS. -->
<div class="ws-navbar flex min-h-[560px] flex-col bg-[var(--ws-navbar-bg)]">

  <header class="flex items-center justify-between px-6 py-5">
    <a href="#" class="text-xl font-bold tracking-tight text-white">Brand</a>
    <button aria-label="Close menu" aria-expanded="true" class="flex h-8 w-8 flex-col items-center justify-center">
      <span class="block h-0.5 w-6 translate-y-px rotate-45 bg-white"></span> <!-- ws-ok: decorative icon bar -->
      <span class="block h-0.5 w-6 -translate-y-px -rotate-45 bg-white"></span> <!-- ws-ok: decorative icon bar -->
    </button>
  </header>

  <div class="flex flex-1 flex-col justify-center px-10 lg:px-20">
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-4xl font-bold text-white transition-colors hover:text-slate-300 lg:text-6xl">Home</a>
        </li>
        <li>
          <a href="#" class="text-4xl font-bold text-white transition-colors hover:text-slate-300 lg:text-6xl">About</a>
          <ul class="mt-2 flex gap-3 text-base font-normal text-slate-400">
            <li><a href="#" class="transition-colors hover:text-white">Team</a></li>
            <li class="text-slate-600">/</li>
            <li><a href="#" class="transition-colors hover:text-white">Mission</a></li>
            <li class="text-slate-600">/</li>
            <li><a href="#" class="transition-colors hover:text-white">Careers</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="text-4xl font-bold text-white transition-colors hover:text-slate-300 lg:text-6xl">Work</a>
        </li>
        <li>
          <a href="#" class="text-4xl font-bold text-white transition-colors hover:text-slate-300 lg:text-6xl">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="mt-10 flex gap-5 text-sm text-slate-500">
      <a href="#" class="transition-colors hover:text-white">Twitter</a>
      <a href="#" class="transition-colors hover:text-white">LinkedIn</a>
      <a href="#" class="transition-colors hover:text-white">Dribbble</a>
    </div>
  </div>

</div>