mystmd.org theme does not have a hamburger menu on mobile

[choldgraf]

Describe the bug

On mobile screens, the mystmd.org website does not have a hamburger menu, and so all of the top-level links are hidden.

Reproduce the bug

Two screenshots from mystmd.org, note the lack of hamburger menu on mobile:

Expectations

• I'd expect at least the hamburger menu to be present so that I can select top-level pages on mobile.
• Ideally the hamburger menu would also include any other items in the navbar (like the social links).
• And even more ideally, the search button would still be displayed on mobile without needing the hamburger menu, similar to the PyData Sphinx Theme

[choldgraf]

If this should be broken down into a few follow-up issues for things that are likely features not bugs, let me know. I think the main "bug" here is that you can't navigate to guide from the mobile version of mystmd.org.

[rowanc1]

This is for sure a bug. Note that the get started button does take you to the guide, and then a top-left menu does appear.

The problem/bug that I haven't figured out yet is that we don't want to show the docs menu on the main page and so they are fighting for space. The whole nav bar needs a bit of a refresh and moving to a more a11y component framework as well.

[choldgraf]

@rowanc1 indeed although the guide's top-left menu doesn't contain the cross-site links. It only contains the "within subsection" links of the guide. E.g. see here there's no link to "overview", "try myst", etc:

The way that the PyData theme handles this is the following:

On wide screens, the navbar has top-level links, icon links to the right, and a search bar.

On mobile, the navbar shows only a hamburger menu, logo, and search button. The sidebar drawer first displays all the other items from the navbar, and below them displays the "within section" items.

For example, here's the sidebar of the 'User guide' for the pydata theme. You can see the navbar links first, the icon links, and then there's another section for the "within user guide navigation"

Wide:

Mobile:

[choldgraf]

Hooray! This is great to see.

FYI the sidebar behaves a little bit different on the home page vs. the guide, I don't know if that's a general regression or something unique to the home page but here's a GIF of what I'm talking about

[stevejpurves]

@choldgraf it's unique to the home page i.e. part of the design - previously the hide_toc was used to make sure the toc was never shown making it a front/landing page. Note: that's also complemented by the "banner" style nav being switched on the /overview route, as the front page and /overview route are both fed from the myst site in the content folder in this repo.

Had to do work to maintain that :) but was worth it as it improved the [re-]usability of the underlying PrimarySidebar and ConfigurablePrimarySidebar components to they are more flexible for future themes to vary the behaviour.

it is nice to have full navigation on there though!

[choldgraf]

Just to be clear the thing I was talking about was that in the home page, the background isn't blacked-out when the drawer is open, and clicking outside the drawer doesn't do anything. Whereas it does do this in the /guide domain. Is that what you're talking about?

[stevejpurves]

ah ha, i was talking about the content of the sidebar i.e. not showing the underlying table of contents and only the navigation items. Now I see what you mean.

Right, that is a bug, opened #19