troylusty.com/src/components/Header.astro

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

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

const allPosts = (await getCollection("posts")).filter(
  (post) => !post.data.draft,
);
const hasPosts = allPosts.length > 0;

const allProjects = (await getCollection("projects")).filter(
  (post) => !post.data.draft,
);
const hasProjects = allProjects.length > 0;

const filteredNavLinks = SITE.NAVLINKS.filter((link) => {
  if (link.href === "/posts") {
    return hasPosts;
  }
  if (link.href === "/projects") {
    return hasProjects;
  }
  return true;
});
---

<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 rounded-sm transition-colors duration-500 ease-in-out"
      />
    </a>
    <ul class="flex w-fit flex-row items-center gap-4">
      {
        filteredNavLinks.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>