---
const navItems = [
  { label: "Home",    href: "/" },
  { label: "About",   href: "/about" },
];

const currentPath = Astro.url.pathname;
---

<div id="topbar-inner" class="flex items-center justify-between px-6 h-12 bg-ctp-mantle border-b border-ctp-surface">
  <span id="logo" class="text-ctp-accent font-semibold text-sm tracking-wide">Cyperpunk.de</span>
  <nav class="flex gap-6">
    {navItems.map((item) => (
	  <a
        href={item.href}
        class={`text-sm transition-colors ${currentPath === item.href ? "text-ctp-accent" : "text-ctp-subtext hover:text-ctp-text"}`}
      >
        {item.label}
      </a>
    ))}
  </nav>
</div>
