Share sidebar toggle state between pages

[da5nsy]

Describe the bug

context
https://deploy-preview-2309--the-turing-way.netlify.app (as part of the-turing-way/the-turing-way#2309)

expectation
I had assumed that the sidebar toggle would be inherited when moving from page-to-page within a site, but this does not seem to be happening?

Reproduce the bug

• scroll to the bottom of any page
• toggle off the left sidebar
• click the 'next' button in the bottom right of the page
• watch as the sidebar returns on the next page

List your environment

https://deploy-preview-2309--the-turing-way.netlify.app (as part of the-turing-way/the-turing-way#2309)

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[choldgraf]

Just realized I never responded to this - thanks @da5nsy for reporting. I'm flagging it as an enhancement rather than a bug since I think it would be extending the functionality of this theme.

I think the way to do this would be to use browser storage that records the state of the sidebar and persists it across page visits. For example, in the pydata theme:

Here we set the position of the sidebar scroll:

https://github.com/pydata/pydata-sphinx-theme/blob/eff4dcd45a8403a57ffc116207062786abd46e52/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js#L161-L165

Here we grab this value and use it to scroll the sidebar to the appropriate location:

https://github.com/pydata/pydata-sphinx-theme/blob/eff4dcd45a8403a57ffc116207062786abd46e52/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js#L133-L136

We could do the same for the label/input that toggles our primary sidebar, and use this to quickly re-trigger on subsequent pages if need be. The trick would be doing this in a way that doesn't create visual glitches.

[Paul-AUB]

I would be interested on this feature too !

[ogrisel]

As an alternative to saving and re-setting the collapse state and scroll position, I think it would be nice to have a way to:

• expand only the ancestors of the current / active page;
• automatically scroll the left navbar so that the inner active header is at the top 25% of the page.

This way, when you click on a link to a specific jupyter-book page from an external website, the state of the left navbar would be intuitive.

Furthermore, when clicking "next" several times at the bottom of the main content area of jupyter book pages, the left side bar would progressively be updated to track the progress in the overall table of contents.

[ogrisel]

Actually, re-reading the code of the scrollToActive function in pydata-sphinx-theme.js it already does what I want.

However this code does not work in jupyter book because the html components sets id=bd-docs-nav in spinx-book-theme while it is class="bd-docs-nav" in the original pydata-sphinx-theme HTML component.

[ogrisel]

To also save the toggle state we would need to define a JS function in sphinx-book-theme to override the scrollToActive function of pydata-sphinx-theme and also store and restore the presence of the checked attribute of the input tag of class toctree-checkbox along with the value of their id attribute.

Unfortunately, the JS generated by sphinx-book-theme is not marked as preloaded /lazily loaded as the JS of pydata-sphinx-theme, which means that the function scrollToActive from pydata-sphinx-theme cannot be overridden by a function with the same name in sphinx-book-theme. However I am not familiar with how webpack works so I cannot do the change myself.

Alternatively we could undo the fix I proposed in #754 and instead write a new scrollToActivesSphinxBook function in pydata-sphinx-theme that assumes that the scrollToActive from pydata-sphinx-theme would neither conflict (because the navbar would be found by id instead of by class) nor override (because the function names would be different).

[ogrisel]

For information, I deployed the fix of #754 to our jupyter book instance. You can see the effect on the scroll state by navigating to a page towards the middle or end of the book, e.g.:

https://inria.github.io/scikit-learn-mooc/python_scripts/trees_classification.html

As discussed above, this is still messy when you expand a few menu items at the beginning and then click on a section header towards the end of the notebook.

Still since is already much better than the current "keep the scroll bar to the top after navigating to a new page".