troylusty.com/src/components/Header.astro

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

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">
    <div class="flex w-fit items-center justify-between">
      <a href="/" aria-label={SITE.TITLE} title={SITE.TITLE} class="group">
        <div
          class="ring-secondary/10 size-8 rounded-full bg-linear-45 from-[#FF5907] from-50% to-[#FF8548] ring-1 transition-transform ease-in-out ring-inset group-hover:scale-105"
        >
        </div>
      </a>
    </div>
    <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 capitalize transition-colors duration-300 focus:outline-hidden">
              <a
                href={link.href}
                class:list={[isActive ? "text-secondary" : null]}
              >
                {link.name}
              </a>
            </li>
          );
        })
      }
      <li>
        <Button href={`mailto:${SITE.EMAIL}`} link="Email" />
      </li>
    </ul>
  </nav>
</header>