---
// the top of the page lives here instead of a top bar: logo and theme toggle,
// then search, then the nav. the nav is starlight's sidebar data rendered flat:
// group headings and links, no collapsing, no indentation (styles in tangled.css)
import type { StarlightRouteData } from "@astrojs/starlight/route-data";
import Search from "@astrojs/starlight/components/Search.astro";
import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
import ThemeToggle from "./ThemeToggle.astro";

type Entry = StarlightRouteData["sidebar"][number];

const { sidebar } = Astro.locals.starlightRoute;
const links = (entries: Entry[]) => entries.filter((e) => e.type === "link");
---

<div class="sidebar-top sl-hidden md:sl-flex">
  <SiteTitle />
  <ThemeToggle />
</div>
<div class="sidebar-search"><Search /></div>

<SidebarPersister>
  <nav class="docs-nav">
    {
      sidebar.map((entry) =>
        entry.type === "link" ? (
          <ul>
            <li>
              <a href={entry.href} aria-current={entry.isCurrent ? "page" : undefined}>
                {entry.label}
              </a>
            </li>
          </ul>
        ) : (
          <section>
            <h2>{entry.label}</h2>
            <ul>
              {entry.entries.map((child) =>
                child.type === "link" ? (
                  <li>
                    <a href={child.href} aria-current={child.isCurrent ? "page" : undefined}>
                      {child.label}
                    </a>
                  </li>
                ) : (
                  <li class="subgroup">
                    <h3>{child.label}</h3>
                    <ul>
                      {links(child.entries).map((link) => (
                        <li>
                          <a href={link.href} aria-current={link.isCurrent ? "page" : undefined}>
                            {link.label}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </li>
                ),
              )}
            </ul>
          </section>
        ),
      )
    }
  </nav>
</SidebarPersister>