Nested Sidebar Navigation with Active-Path Auto-Expand — Real grid-template-rows Animation

A collapsible sidebar with several top-level groups is only genuinely useful if it opens to the right place automatically — a user landing on a "Rate limits" documentation page shouldn't have to manually click open "API Reference" themselves just to see where they currently are in the site structure. This snippet computes that on load: it finds whichever link is marked active, walks up to its containing group, and expands only that one group, leaving every sibling group collapsed.

Finding the active group from the active link, not the reverse

expandActivePath() starts from nav.querySelector('.tree-link.active') — the link, not the group — and calls .closest('.tree-group') on it to find its containing parent group. This direction matters: the active state genuinely belongs on the *link* (it's the specific page the user is on), and the group's open/closed state is *derived* from that, not the other way around. If a different link becomes active later (e.g. after a client-side route change), re-running the same lookup would correctly find and expand its new containing group without any group-specific logic needing to change.

Smooth open/close via the same grid-template-rows trick used elsewhere in this library

Rather than animating height (which requires a fixed pixel target CSS can't compute from auto) or a hard display toggle (which can't animate at all), .tree-children uses grid-template-rows: 0fr at rest and 1fr when its group has the .open class — the same fractional-grid-row animation technique used by this library's CSS-only accordion, applied here to a JavaScript-driven nested nav instead of a pure-CSS checkbox hack.

Building the required overflow wrapper dynamically, not by hand in the markup

The grid-row-collapse technique needs an inner wrapper with overflow: hidden so content visually clips as the row shrinks toward zero. Rather than requiring that wrapper <div> to be written by hand around every group's links in the HTML, the setup code moves each group's existing child links into a wrapper it creates programmatically on load — keeping the authored HTML markup simpler (flat <a> tags directly inside .tree-children) while still getting the wrapper structure the animation technique actually needs underneath.

Only one group opens automatically — the rest wait for a deliberate click

expandActivePath() only ever calls setGroupOpen(group, true) for the one group containing the active link; every other group is left in its default collapsed state. This keeps the sidebar's initial state focused and uncluttered — showing exactly "here's where you are" rather than expanding everything and asking the user to scan a wall of open sections to find their current location themselves.