[docs] Button to show sidebar on mobile

[choldgraf]

With the new documentation refresh, the sidebar hides itself on mobile. This is a challenge for users that primarily use the sidebar to navigate to the pages they want (which is a very common pattern people expect to exist in websites).

I propose that on mobile, a button shows up that will show the sidebar as a left sliding "drawer" when clicked. There are a few ways to do this, but the way many themes have implemented it is to use a label and input pair and do the following:

• Before the page's content, put something like:

  <input id="__sidebar-primary" ...
  <label for="__sidebar-primary" class="sidebar-toggle__overlay" ...
  

  The input is the element that gets "ticked" when people click a label. We define CSS rules later to make this trigger the sidebar behavior. The label is an "overlay" that shows up when the sidebar is shown. Clicking the overlay will then "hide" the sidebar. It should be behind the sidebar, but above everything else.

• In your page structure somewhere put a button like:

  <label for="__sidebar-primary" class="sidebar-toggle__show"
  

  This is a label that shows the sidebar on mobile when clicked. Clicking it triggers the "input" to be "checked"

• Add CSS rules roughly like

  div.my-sidebar-class {
      position: fixed;
      height: 100%;
      width: 75%;
      margin-left: -75%;
  }
  input#__sidebar-primary:checked ~ div.my-site-container div.my-sidebar-selector {
      ... behavior to show the sidebar sliding in from the left side
      ... generally by changing `margin-left: 0`
  }
  

For examples of some implementations, see:

• https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-toggle.scss
• https://github.com/executablebooks/sphinx-book-theme/blob/master/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss

[tk0miya]

+1