CSS is kinda fabulous r/n. I've got this nested table of contents for a page that's sticky along the side as you scroll, list of links and details/summaries with nested lists, that is both a scrollspy with whatever is currently visible, but also automatically opens and closes the details! ALL WITHOUT JAVASCRIPT.
A wonderful combo of scroll-target-group and :target-current for the scrollspy, ::details-content w/content-visible for the details opening, a healthy use of :has, and ofc pos: sticky.
Haha! Throw the whole sidebar into a `details` and add a style query, and with the same magic, you've now got a _transforming_ menu that goes from collapsable view to wide open view depending on where you place it and the layout it's in!
This, friends, is why I still build complex personal projects for fun. I get to see just what the web can do today in an open canvas.
This is what I'm talking about with throwing it into a `details` element; I've literally built this component before on production sites, lamenting that fundamental interactions change between viewports and needing lots of extra markup and JavaScript to make it happen. Now, it’s literally just a couple lines of CSS to hide the control and force the `details` open—everything else about the component stays the same.
I love it.
Snugug
benschwarz