Navbar.astro

---
import Link from "./Link.astro";
import { site } from "../site";
import { Icon } from "astro-icon/components";
import DrawerToggler from "./DrawerToggler.astro";
import HorizontalContainer from "./HorizontalContainer.astro";
import ThemeSwitcher from "./ThemeSwitcher.astro";
import Dropdown from "./Dropdown.astro";
import { getCollection } from "astro:content";
import { conceptPagePath, startPagePath } from "../lib/utils";
import Drawer from "./Drawer.astro";

const { title, githubUrl, navbarLinks } = site;

const startPages = (await getCollection("start")).map(
  ({ slug, data: { title } }) => {
    return { title, href: startPagePath(slug) };
  },
);

const conceptPages = (await getCollection("concepts")).map(
  ({ slug, data: { title } }) => {
    return { title, href: conceptPagePath(slug) };
  },
);
---

<nav
  class="sticky top-0 z-10 bg-white py-2 shadow-sm shadow-light-gray dark:bg-dark dark:shadow-dark-gray md:py-2.5 lg:py-3"
>
  <HorizontalContainer>
    <div class="flex items-center justify-between">
      {/* Navbar "brand" */}
      <div class="flex items-center space-x-2 md:space-x-3 lg:space-x-4">
        <Link
          href="/"
          class="text-2xl font-semibold tracking-tight duration-hover hover:text-primary dark:hover:text-light-gray md:text-3xl lg:text-4xl"
        >
          {title}
        </Link>

        <span
          class="flex items-center space-x-1.5 text-sm font-light md:text-base lg:text-lg"
        >
          <span>from</span>
          <Link
            href="https://determinate.systems"
            class="font-semibold duration-hover hover:text-primary dark:hover:text-light-blue"
            target="_blank"
          >
            Determinate Systems
          </Link>
        </span>
      </div>

      {/* Visible only on mobile */}
      <div class="flex items-center space-x-4 md:hidden">
        <ThemeSwitcher />

        <Link href={githubUrl} target="_blank">
          <Icon
            name="radix-icons:github-logo"
            class="size-4 transition duration-hover hover:text-gray dark:hover:text-light-gray md:size-5 lg:size-6"
          />
        </Link>

        <DrawerToggler />
      </div>

      {/* Show only on md or above (invisible on mobile) */}
      <ul class="hidden items-center gap-4 md:flex md:gap-5 lg:gap-6">
        <li>
          <Dropdown text="Quick start" pages={startPages} ordered />
        </li>
        <li>
          <Dropdown text="Concepts" pages={conceptPages} />
        </li>

        {
          navbarLinks.map(({ text, href }) => (
            <li>
              <Link
                {href}
                class="text-sm duration-hover hover:text-primary md:text-base lg:text-lg"
              >
                {text}
              </Link>
            </li>
          ))
        }

        <li class="flex items-center space-x-2 md:space-x-3 lg:space-x-4">
          <ThemeSwitcher />

          <Link href={githubUrl} target="_blank">
            <Icon
              name="radix-icons:github-logo"
              class="size-4 duration-hover hover:text-gray dark:hover:text-light-gray md:size-5 lg:size-6"
            />
          </Link>
        </li>
      </ul>
    </div>
  </HorizontalContainer>
</nav>

<Drawer />