troylusty.com/src/components/Header.astro

---
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
---

<header class="mx-auto mb-8 w-full max-w-[65ch] space-y-6 pt-4">
  <nav
    x-data="{ mobileMenuIsOpen: false }"
    x-on:click.away="mobileMenuIsOpen = false"
    class="flex h-12 items-center justify-between"
  >
    <a href="/" title={SITE.TITLE}>
      <Icon
        name="icon"
        title={SITE.TITLE}
        class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
      />
    </a>
    <ul class="hidden items-center gap-4 sm:flex">
      {
        SITE.NAVLINKS.map((i) => (
          <li>
            <a
              data-navlink
              href={i.href}
              class="text-tertiary hover:text-secondary focus:text-secondary font-medium capitalize transition-colors duration-300 focus:outline-hidden"
              aria-current="page"
            >
              {i.name}
            </a>
          </li>
        ))
      }
    </ul>
    <button
      x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
      x-bind:aria-expanded="mobileMenuIsOpen"
      x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
      type="button"
      class="text-secondary flex sm:hidden"
      aria-label="mobile menu"
      aria-controls="mobileMenu"
    >
      <Icon
        name="mdi:menu"
        aria-hidden="true"
        class="size-6"
        x-cloak
        x-show="!mobileMenuIsOpen"
      />
      <Icon
        name="mdi:window-close"
        aria-hidden="true"
        class="size-6"
        x-cloak
        x-show="mobileMenuIsOpen"
      />
    </button>
    <ul
      x-cloak
      x-show="mobileMenuIsOpen"
      x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
      x-transition:enter-start="-translate-y-full"
      x-transition:enter-end="translate-y-0"
      x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
      x-transition:leave-start="translate-y-0"
      x-transition:leave-end="-translate-y-full"
      id="mobileMenu"
      class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto px-6 pt-6 pb-6 sm:hidden"
    >
      {
        SITE.NAVLINKS.map((i) => (
          <li class="py-4">
            <a
              data-navlink
              href={i.href}
              class="text-secondary w-full text-lg font-medium capitalize focus:underline"
              aria-current="page"
            >
              {i.name}
            </a>
          </li>
        ))
      }
    </ul>
  </nav>
</header>