troylusty.com/src/components/Header.astro

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

const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.replace(/\/$/, "");
---

<header class="mx-auto w-full">
  <nav
    class="md:flex-no-wrap flex w-full flex-wrap justify-between"
    x-data="{ open: false }"
  >
    <div class="flex w-full items-center justify-between md:w-fit">
      <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>
      <button
        x-on:click="open = !open"
        x-bind:aria-expanded="open"
        type="button"
        class="text-secondary flex md:hidden"
        aria-label="mobile menu"
        aria-controls="mobileMenu"
      >
        <Icon
          name="mdi:menu"
          aria-hidden="true"
          class="size-6"
          x-cloak
          x-show="!open"
        />
        <Icon
          name="mdi:window-close"
          aria-hidden="true"
          class="size-6"
          x-cloak
          x-show="open"
        />
      </button>
    </div>
    <ul
      class="my-4 flex w-full flex-col items-center gap-4 text-right md:my-0 md:flex md:w-fit md:flex-row md:text-left"
      x-bind:class="{ 'hidden': !open }"
      x-cloak
    >
      {
        SITE.NAVLINKS.map((link) => {
          let linkHref = link.href.replace(/\/$/, "");
          const isActive = currentPath.startsWith(linkHref);
          return (
            <li class="text-tertiary hover:text-secondary focus:text-secondary text-2xl font-medium capitalize transition-colors duration-300 focus:outline-hidden md:text-base">
              <a
                href={link.href}
                class:list={[isActive ? "text-secondary" : ""]}
              >
                {link.name}
              </a>
            </li>
          );
        })
      }
    </ul>
  </nav>
</header>