---
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' || pathname === '/blog/' ? 'headerlink-active' : ''}`} href="/blog">blog</a>
    <a class={`headerlink ${pathname === '/logs' || pathname === '/logs/' ? 'headerlink-active' : ''}`} href="/logs">logs</a>
    <a class={`headerlink ${pathname === '/gallery' || pathname === '/gallery/' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a>
    <a class={`headerlink ${pathname === '/guestbook' || pathname === '/guestbook/' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a>
    <a class={`headerlink ${pathname === '/slashes' || 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>
