<!-- Mobile menu button -->
<button
  type="button"
  class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
  aria-controls="mobile-menu"
  x-on:click="menuOpen = ! menuOpen"
  x-bind:aria-expanded="menuOpen"
>
  <span class="absolute -inset-0.5"></span>
  <span class="sr-only">Open main menu</span>
  <!-- Menu open: "hidden", Menu closed: "block" -->
  <svg
    class="h-6 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    x-bind:class="menuOpen ? 'hidden' : 'block'"
    x-bind:aria-hidden="menuOpen"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
    />
  </svg>
  <!-- Menu open: "block", Menu closed: "hidden" -->
  <svg
    class="h-6 w-6"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
    x-bind:class="menuOpen ? 'block' : 'hidden'"
    x-bind:aria-hidden="! menuOpen"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M6 18L18 6M6 6l12 12"
    />
  </svg>
</button>