---
const { pathname } = Astro.url;
const currentPath =
  pathname.endsWith("/") && pathname.length > 1
    ? pathname.slice(0, -1)
    : pathname;
const navItems = [
  { href: "/", label: "About" },
  { href: "/now", label: "Now" },
  { href: "/writing", label: "Writing" },
];
---

<header>
  <h1>dnsc</h1>
  <ul>
    {
      navItems.map(({ href, label }) => (
        <li>
          <a href={href} class={currentPath === href ? "active" : ""}>
            {label}
          </a>
        </li>
      ))
    }
  </ul>
</header>

<style>
  header {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    flex-wrap: wrap;
    max-width: var(--container-lg);
  }

  h1 {
    font-family: var(--font-fancy);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: center;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
    padding-left: 0;
    margin-bottom: 0.6rem;
  }

  ul > li {
    margin-left: 0.6rem;
    margin-right: 0.6rem;
  }

  a,
  a:visited {
    color: var(--foreground);
  }

  a.active {
    font-weight: bold;
  }
</style>