ENH: place the RDT flyout in the sidebar

[12rambau]

Fix #194

in #705 @choldgraf was advocating in favor of moving the RTD's flyout in the header. I tried a lot and there really is no real estate available for it. we already added an option to limit the number of links displayed at the same time, the only place I could think about would be to replace the version switcher which could lead to lots of different issues.

In this PR I fall back on the initial idea to use the primary sidebar and embed the flyout in it at the bottom (we are advertising a "clean 3-column template" so let's use it!). This can also be considered a first step before moving it elsewhere.

• the flyout is caught by JS as in sphinx-book (https://github.com/executablebooks/sphinx-book-theme/blob/af6277a7276112ee915d901984193c49e56d5a76/src/sphinx_book_theme/assets/scripts/index.js#L189-L213)
• the flyout is styled to stick to the primary sidebar
• the content is styled using our variables so it's now reactive to theming

	dark	light
fold
expand

[choldgraf]

This looks good to me! Only one thing I noticed: for me the switcher isn't visible until you scroll down two times. One to get to the bottom of the primary sidebar (and for some reason it's still hidden) and a second time to reveal the footer and the switcher.

I think if there's a switcher, it should always be visible in the sidebar, and the sidebar's contents should scroll above it.

As a future change, another option we could take is to make this switcher look like a self-container button that, when clicked, reveals the flyout menu. Then people could place it where they wish (in the header, in the sidebar, etc). It could have a similar size as our "version dropdown" button, but it would just have a more rich UI. I think to accomplish this, we'd only need to add the CSS to make sure that it didn't behave weirdly if the component were placed in the header, that's a bout it.

[12rambau]

As a future change, another option we could take is to make this switcher look like a self-container button that, when clicked, reveals the flyout menu. Then people could place it where they wish (in the header, in the sidebar, etc). It could have a similar size as our "version dropdown" button, but it would just have a more rich UI. I think to accomplish this, we'd only need to add the CSS to make sure that it didn't behave weirdly if the component were placed in the header, that's a bout it.

That's something I was thinking for every component, have a specific display depending on where it is added in the template, that's completely doable from a CSS point of view, just super long to code

[12rambau]

I think if there's a switcher, it should always be visible in the sidebar, and the sidebar's contents should scroll above it.

It's already the case the issue is the size of the sidebar itself. It's not taking into account the length of the announcement banner so it's 1 banner too high. The problem from a CSS point of view is that the banner can be bigger than 1 line. What would you think if we handle this via javascript? (maybe in another PR)

[choldgraf]

Makes sense to tweak the vertical position of the drawer in a follow-up...I'm +1 on this since it's a definite improvement over the "floating RTD menu".

[VeckoTheGecko]

Great feature!

To clarify, is the sidebar only possible to view on smaller screens? And if so, does that mean that if you're using RTD with this theme, that you need to double up; implementing and maintaining the PyData version switcher (for desktop users) as well as have the RTD switcher? Just wondering if there's a more elegant solution here that I'm missing (and if there is, I'm happy to submit a PR updating the RTD section of the docs).

EDIT: I realised that this is only an issue on pages with no section navigation

[12rambau]

@VeckoTheGecko yes it's only a problem for pages without navigation. A good workaround would be to code the a widget to put the RDT flyout in the header navbar (#705) but nobody started a PR yet.

I think the best way to proceed is to create a set of custom CSS for when the flyout handler is set in the navbar.