Docs sidebar with scroll-spy

<div class="mx-auto flex max-w-5xl gap-10 px-4 py-10">
  <nav aria-label="On this page" class="sticky top-20 hidden h-fit w-56 shrink-0 lg:block">
    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-slate-500">On this page</p>
    <ul id="toc" class="space-y-1 border-l border-slate-200 text-sm">
      <li><a href="#install" class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-slate-600 hover:text-slate-900">Install</a></li>
      <li><a href="#configure" class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-slate-600 hover:text-slate-900">Configure</a></li>
      <li><a href="#deploy" class="-ml-px block border-l-2 border-transparent py-1 pl-4 text-slate-600 hover:text-slate-900">Deploy</a></li>
    </ul>
  </nav>

  <article class="min-w-0 flex-1 space-y-16">
    <section id="install" class="scroll-mt-24"><h2 class="text-2xl font-bold">Install</h2><p class="mt-3 h-96 text-slate-600">Add the package to your project.</p></section>
    <section id="configure" class="scroll-mt-24"><h2 class="text-2xl font-bold">Configure</h2><p class="mt-3 h-96 text-slate-600">Set the options you need.</p></section>
    <section id="deploy" class="scroll-mt-24"><h2 class="text-2xl font-bold">Deploy</h2><p class="mt-3 h-96 text-slate-600">Ship it to production.</p></section>
  </article>
</div>

// Highlights the TOC link whose section sits in a thin band near the top.
const links = [...document.querySelectorAll('#toc a')];
const active = ['border-indigo-600', 'text-indigo-600', 'font-medium'];
const idle = ['border-transparent', 'text-slate-600'];

function mark(id) {
  for (const a of links) {
    const on = a.getAttribute('href') === '#' + id;
    a.classList.toggle(idle[0], !on);
    a.classList.toggle(idle[1], !on);
    active.forEach((c) => a.classList.toggle(c, on));
  }
}

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) if (entry.isIntersecting) mark(entry.target.id);
  },
  { rootMargin: '-80px 0px -70% 0px' } // band: 80px below top to 30% of viewport
);

links.forEach((a) => {
  const target = document.querySelector(a.getAttribute('href'));
  if (target) observer.observe(target);
});