Navigation.astro

---
import { ExternalLinkIcon } from "@radix-ui/react-icons";
import MobileNavbar from "./MobileNavbar";
import Search from "./Search.astro";
import ThemeToggle from "./ThemeToggle.astro";
import { headerNavItems } from "./navigationConfig";
import { groupedNavbarParents, navbarParents, pages } from "./navigationConfig";
import { NavContents } from "./NavContents";
---

<header
  class="sticky top-0 z-50 w-full border-b border-border/40 g-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 h-16"
>
  <div class="h-full container flex items-center">
    <div class="md:flex">
      <MobileNavbar client:media="(max-width: 768px)">
        <NavContents
          groupedNavbarParents={groupedNavbarParents}
          navbarParents={navbarParents}
          pages={pages}
          client:visible
        />
      </MobileNavbar>
      <a class="hover:underline mr-6 hidden md:block" href="/">VocaDB Wiki</a>
      <nav class="hidden md:flex items-center gap-6 text-sm">
        {
          headerNavItems.map((navItem) => (
            <a
              href={navItem.href}
              target={navItem.href.startsWith("//") ? "_blank" : "_self"}
              class={`navitem flex flex-row items-center gap-1 hover:text-foreground/80 transition-none hover:transition-colors ${Astro.url.pathname.includes(navItem.href) ? "text-foreground" : "text-muted-foreground"}`}
            >
              {navItem.name}
              {navItem.href.startsWith("//") && <ExternalLinkIcon />}
            </a>
          ))
        }
      </nav>
    </div>
    <div class="flex flex-1 justify-end items-center space-x-2">
      <Search />
      <ThemeToggle />
    </div>
  </div>
</header>