Left sidebar / table of contents toggle drawer on mobile

[cheekyshibe]

Description

On mobile displays, our left sidebar gets placed above the page's content. This means that if you have a lot of items in the sidebar navigation, then the page's content gets pushed below the fold.

For example, see the NumPy NEP documentation on mobile:

Instead, we could make the left sidebar toggleable on mobile so that a user can click a button to see the sidebar, then choose a page, and then it disappears.

This would make pages with large sidebar items easier to navigate and would prevent them from blocking page content. For example, here's a similar behavior in Furo:

Guide to implementation

This could be done in CSS-only by following the <label> and <input> pattern that Furo follows.

Basically this means:

At the top of our page, put an input/label combo like:

<input type="checkbox" class="sidebar-toggle" name="__sidebar" id="__sidebar">
<label class="overlay" for="__sidebar">
    <div class="visually-hidden">Hide navigation sidebar</div>
</label>

The input is the thing that gets "checked", and we add CSS rules that check for input:checked and trigger behavior on other parts of the page as a result.

The label above is hidden by default. It is only displayed when the sidebar is toggled on (and then becomes a dark background that, when clicked, will un-toggle the input field and hide the sidebar.

Within our page content, put another label that has a hamburger menu button.

Something like:

<!-- Label to toggle the left sidebar -->
<label class="page-topbar-item" for="__sidebar">
  <div class="visually-hidden">Hide navigation sidebar</div>
  <i class="fas fa-bars"></i>
</label>

This is the label that users generally click. It should only show up on mobile, and clicking it will check the <input> box, and trigger the resulting CSS rules.

Add CSS to hide the sidebar to the left on mobile, and show it when the <input> is checked

Finally, on mobile we want our sidebar to be fixed position, full height, and roughly 60% width. By default it should be off-screen to the left + visually hidden, and checking the input would cause it to "slide" onto the screen.

[jorisvandenbossche]

If there are many items in my toctree as navigation it would be not friendly for the mobile reader.

Can you try to clarify a bit more what you exactly mean? Is it about many items in the navbar? Or in the left sidebar? (which I think currently simply appears on top of the page in mobile mode, right now)

In case of the second, sphinx-book-theme more or less has this (you can check the mobile mode of jupyterbook.org), but that's also because the sidebar is their first navigation level, while here it is the navbar. So in mobile mode we would need some way to combine navigation levels of the navbar and sidebar if we want to have both in the mobile toggle.

Another situation is that I want to find a section quickly on a single page in mobile mode.

Indeed, currently the in-page TOC in the right sidebar simply disappears if the screen width gets too small. Having a way to still toggle it to appear in mobile mode sounds useful. The main question is probably where to include a button in the layout for this.

Eg docusaurus (https://docusaurus.io/docs/en/installation) has in-page TOC accessible through a "⋮" button at the right in the mobile menu:

[cheekyshibe]

If there are too many items in the left sidebar it will take at least one-page height in mobile mode. Assuming that the user has found the page they want to visit through the top navigation bar and the left sidebar, it should be assumed that they no longer need a list at the top by default. So it may be more friendly to add an interactive element (eg: a button) to let the user choose whether to show or hide this content.

Docusaurus looks so nice. (Wow it even has a to-the-top button XD)
Seems "Docusaurus + Pydata" is my dream theme. 🥰

[choldgraf]

@MegChai I hope that you don't mind - I've updated the title and the top comment to provide more details on this one, as I think it would be quite useful, and wanted to provide more direction for somebody that might be interested in implementing it!

[jorisvandenbossche]

@choldgraf this is still an issue specific to mobile layout? (if so I would leave that word in the title)

[choldgraf]

Good point - added mobile to title