Left ToC open on mobile during page load

[chrisjsewell]

Description

When the book theme is loaded on narrow screens, the left navigation bar is briefly visible, and then collapses.

Instead, it should automatically be invisible on narrow screens, and pressing the "show navbar" button should show it. Basically, similar to how Furo works:

)

Why does this happen

This happens because we are currently using Bootstrap Collapse functionality to toggle the left navigation bar. Clicking the button will use the bootstrap classes .collapse, .collapsing, and .show to trigger two things:

• the visibility of the sidebar
• the icon that's displayed in the hamburger menu

The problem with this is that we want a different default behavior on wide vs. narrow screens. On wide screens, the sidebar should be visible by default, with the option to hide. On narrow screens we want it hidden by default, with option to show (and ideally, hiding can be done by clicking anywhere outside the sidebar, not just on the toggle button).

How could we solve this?

I think the easiest way to solve this would be to do a few things:

• Stop relying on Bootstrap for this
• Use one of these approaches to showing the sidebar:
  • a simple class like .show-toggle and a simple onclick function like getElementById('site-navigation').classList.toggle("show-toggle")
• The visibility of the sidebar can then be made different with @media queries in our CSS (so that checked means "show it" on mobile, but means "hide it" on wide screens)

[chrisjsewell]

Yeh the JS is here:

sphinx-book-theme/src/js/sphinx-book-theme.js

Line 2 in 4b65bc1

var initTriggerNavBar = () => {

this could, and should, be achieved by CSS @media

[choldgraf]

Yeah it's always been like this, and agreed it is definitely sub optimal. I feel like part of the answer is finding a more graceful way to handle the opening and closing logic (IMO it would be great if we could avoid JS altogether but I wasn't sure how to do this at the time)

[choldgraf]

I tried to see if this would be a simple fix, but I got bogged down in the bootstrap JS/CSS stuff and ran out of time, so instead I've updated the top comment with some more explanation of what I think is going on here so it's easier to pick back up (myself or others) in the future

[pradyunsg]

FWIW, another option would be to have JS inline at the top of body / relevant tag, that adds the relevant class to it, to trigger the hiding (if the hiding worked that way)