Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
2.9 kB · 81 lines
Astro
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182---// 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 "./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>
<!-- 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>