✨ ENH: Collapsible sections in the sidebar

[jorisvandenbossche]

Very much a draft PR, but putting it here to show what I experimented with a while ago.

This basically is a copy the CSS approach (and code) from Furo. I initially started with trying the approach from the sphinx-book-theme, but for some reason (probably just something small), I didn't get the javascript working for that.

We need to decide which approach to use, and then also a lot to clean-up in the PR.

[jorisvandenbossche]

The demo site shows the basics are working: https://pydata-sphinx-theme--349.org.readthedocs.build/en/349/demo/demo.html

[choldgraf]

I think it looks great! We should probably add a few more nested levels here and there in the docs to see how the arrows look (e.g., 2 levels deep, or two nested levels right next to each other, etc).

I've just upgraded to the pydata v0.5 theme in the sphinx book theme: executablebooks/sphinx-book-theme#312

once we get this merged and released, I will remove this section of that theme as well 🎉

[jorisvandenbossche]

I added some more nested pages in the demo docs, and after some fixes, that's looking good now!

[choldgraf]

Awesome, this is looking great. What do you think about adding a lightweight UX to show when people are hovering over the arrow? Something like

ul.bd-sidenav label:hover {
    background: #e4e4e4;
}

[bollwyvl]

background: #e4e4e4;

except not hardcoded...

[choldgraf]

lol sorry that was my "minimal viable github issue product" 🙃

[jorisvandenbossche]

What do you think about adding a lightweight UX to show when people are hovering over the arrow?

Is this something you would like to add to sphinx-book-theme as well? (I mimicked that look for now)
Note that there is actually already a hover color for the icon (but not the full label area), but because we currently use the dark purple for this, it's not very apparent.

Adding a more prominent area hover color might indeed be good. It's also what Furo does (although Furo also does that for the titles in the sidebar)

[choldgraf]

I do think it's hard to see the arrow light up with any kind of dark color. I am 50/50 on importing it in the book theme, but it feels like a reasonable UX when I try it out myself on this theme:

[jorisvandenbossche]

OK, I added a hover background color controlled by a new CSS variable.

[choldgraf]

[jorisvandenbossche]

Woohoo, this will also be great to use in the pandas docs!

[ChaiByte]

Coooooooooooool~!