kjelsrud.dev/src/components/Header.astro

---
const { pathname } = Astro.url;
---
<header class="flex flex-col gap-6 py-5">
  <div class="flex items-end gap-4">
    <img class="profile" />
    <h1 class="text-3xl font-extrabold">Sids' blog</h1>
  </div>
  <nav class="flex flex-wrap gap-2">
    <a class={`headerlink ${pathname === '/' ? 'headerlink-active' : ''}`} href="/">home</a>
    <a class={`headerlink ${pathname === '/blog' ? 'headerlink-active' : ''}`} href="/blog">blog</a>
    <a class={`headerlink ${pathname === '/logs' ? 'headerlink-active' : ''}`} href="/logs">logs</a>
    <a class={`headerlink ${pathname === '/gallery' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a>
    <a class={`headerlink ${pathname === '/guestbook' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a>
    <a class={`headerlink ${pathname === '/slashes'  ? 'headerlink-active' : ''}`} href="/slashes">more</a>
  </nav>
</header>

<style>
  .profile {
      width: 6vh;
      height: 6vh;
      background: url("/mii.webp");
      background-size: cover;
      border-radius: 5px;
  }

  .profile:hover {
      background-image: url("/rick-roll-rick-ashley.gif");
  }
</style>