troylusty.com/src/components/Header.astro

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

<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
  <nav
    x-data="{ mobileMenuIsOpen: false }"
    x-on:click.away="mobileMenuIsOpen = false"
    class="flex h-12 items-center justify-between"
  >
    <a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
      <Icon
        name="icon"
        title={SITE.TITLE}
        class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
      />
      <div
        class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
      >
        Troy Lusty
      </div>
    </a>
    <ul class="hidden items-center gap-4 sm:flex">
      {
        SITE.NAVLINKS.map((i) => (
          <li class="mb-1 last:mb-0">
            <a
              data-navlink
              href={i.href}
              class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
              aria-current="page"
            >
              {i.name}
            </a>
          </li>
        ))
      }
      <li>
        <a href={`mailto:${SITE.EMAIL}`}>
          <span
            class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
            >Hire me</span
          >
        </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 rounded-b-md px-6 pt-20 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>
        ))
      }
      <li class="mt-4 w-full border-none">
        <Button
          href={`mailto:${SITE.EMAIL}`}
          link="Hire me"
          class="block w-full justify-center"
        />
      </li>
    </ul>
  </nav>
</header>