---
// the top of the page lives here instead of a top bar: logo,
// 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 "./Search.astro";
import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
import SiteTitle from "./SiteTitle.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 />
</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>

<!-- the persister restores the last page's scroll; when that leaves the current
     link out of view (a jump from search, say), centre it before first paint -->
<script is:inline aria-hidden="true">
  (() => {
    const scroller = document.getElementById("starlight__sidebar");
    const current = scroller?.querySelector('.docs-nav a[aria-current="page"]');
    if (!scroller || !current) return;
    const view = scroller.getBoundingClientRect();
    const link = current.getBoundingClientRect();
    if (link.top >= view.top && link.bottom <= view.bottom) return;
    scroller.scrollTop += link.top - view.top - (view.height - link.height) / 2;
  })();
</script>