Make the whole left sidebar scrollable

[OriolAbril]

Tried to fix #500. It seems to be working based on a couple local tests,
but all I know about html and css I have learned from looking at sphinx/jekyll
templates and themes, so I am wildly unaware of extra unintended consequences
that might come with the change.

I have also tried to read the contributing section but haven't been able to
figure out if I have to write tests nor in case I do how should I go about
that. Guidance will be very appreciated.

[OriolAbril]

Looking at the preview, the vertical scrollbar does appear when expanding all the subsections in the demo site for example but a horizontal one appears now in all pages which should not be the case.

This did not happen in the couple local tests I did which I am not realizing all have the searchbar on the navbar, not on the sidebar, so it probably has to do with some bad interactions/clashes between the searchbar template and the nav scrollable section added here to englobe it.

[choldgraf]

good catch - I think you could delete:

pydata-sphinx-theme/src/scss/index.scss

Lines 199 to 202 in 540c9eb

	@supports (position: -webkit-sticky) or (position: sticky) {
	max-height: calc(100vh - 11rem);
	overflow-y: auto;
	}

along with #500 (comment)

and then this would remove that second sidebar...does that work?

[OriolAbril]

Working like a charm locally, thanks for the help!

[choldgraf]

This LGTM - thanks for this improvement!

[jorisvandenbossche]

I think this change might have broken the "center/remember scrolling position in the sidebar" feature (not fully sure to be clear, I didn't actually bisect exactly, but this seems the only related commit since the last release).

To see the issue, you can compare https://pydata-sphinx-theme.readthedocs.io/en/latest/demo/subpages/subsubpages/subsubpage18.html (latest docs of master) vs https://pydata-sphinx-theme.readthedocs.io/en/stable/demo/subpages/subsubpages/subsubpage18.html (docs of last release). In the second case, it puts the active item in the navigation "in sight", while on master it falls off the page.

[jorisvandenbossche]

FYI that feature was added in #363, so this is done by some javascript code:

pydata-sphinx-theme/src/js/index.js

Lines 40 to 73 in 71bd290

	// Navigation sidebar scrolling to active page
	function scrollToActive() {
	var sidebar = document.getElementById('bd-docs-nav')
	// Remember the sidebar scroll position between page loads
	// Inspired on source of revealjs.com
	let storedScrollTop = parseInt(sessionStorage.getItem('sidebar-scroll-top'), 10);
	if (!isNaN(storedScrollTop)) {
	sidebar.scrollTop = storedScrollTop;
	}
	else {
	var active_pages = sidebar.querySelectorAll(".active")
	var offset = 0
	var i;
	for (i = active_pages.length - 1; i > 0; i--) {
	var active_page = active_pages[i]
	if (active_page !== undefined) {
	offset += active_page.offsetTop
	}
	}
	offset -= sidebar.offsetTop
	// Only scroll the navbar if the active link is lower than 50% of the page
	if (active_page !== undefined && offset > (sidebar.clientHeight * .5)) {
	sidebar.scrollTop = offset - (sidebar.clientHeight * .2)
	}
	}
	// Store the sidebar scroll position
	window.addEventListener('beforeunload', () => {
	sessionStorage.setItem('sidebar-scroll-top', sidebar.scrollTop);
	});
	}

It might be a matter of updating the div id that is used to determine the scrolling position (as it is now the parent div that scrolls)

[choldgraf]

Ah i bet you are right! Because the thing that is scrolling is no longer just the toc div, but the whole sidebar div. I bet the selector for the"remember position" stuff is selecting for the toc div