troylusty.com/src/components/Header.astro

---
import { SITE } from "@consts";
import Button from "@components/Button.astro";
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="flex w-full justify-between">
    <a href="/" aria-label={SITE.TITLE}>
      <Icon
        name="icon"
        class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
      />
    </a>
    <ul class="flex w-fit flex-row items-center gap-4">
      {
        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 font-medium transition-colors duration-300 focus:outline-hidden">
              <a
                href={link.href}
                class:list={[
                  isActive
                    ? "text-secondary hover:text-tertiary transition-colors duration-300"
                    : null,
                ]}
              >
                {link.name}
              </a>
            </li>
          );
        })
      }
      <li>
        <Button href={`mailto:${SITE.EMAIL}`} link="Email" />
      </li>
    </ul>
  </nav>
</header>