---
import Link from "@/components/Link.astro";
---

<header class="w-full p-6">
  <nav aria-label="Main navigation">
    <ul class="flex flex-wrap gap-4 items-center">
      <li>
        <a
          href="/"
          aria-label="Home"
          class="flex before:content-['['] after:content-[']_#'] p-1 bg-green-600 text-neutral-800 hover:bg-green-500 transition-colors"
          >dhemasnurjaya</a
        >
      </li>
      <li class="flex before:content-['./'] before:text-neutral-500">
        <Link href="/posts" ariaLabel="Posts">posts</Link>
      </li>
      <li class="flex before:content-['./'] before:text-neutral-500">
        <Link href="/tags" ariaLabel="Tags">tags</Link>
      </li>
      <li class="flex before:content-['./'] before:text-neutral-500">
        <Link href="/search" ariaLabel="Search">search</Link>
      </li>
    </ul>
  </nav>
</header>