theme toggle now outside of collapsed menu on small screens (in Quarto 1.4)

[dragonstyle]

Discussed in #8813

^{Originally posted by timothoms February 21, 2024}

Description

The position of the dark/light theme toggle in relation to the navbar menu has changed in the move from Quarto 1.3 to 1.4. As a result, the theme toggle is now placed outside of the "hamburger" menu (compare the screen shots below, repo here).

Is there a way to include the theme toggle inside the collapsed "hamburger" menu, the way it was in Quarto 1.3?

[dragonstyle]

I've reviewed the code and this is by design in Quarto 1.4. We currently place any tools in the top right of the navbar when the navigation collapses rather than placing them in the menu. We felt that this accomplished a couple of things:

1. It improved discovery for tools which otherwise wouldn't be discovered since they typically appear at the bottom of the collapsed menu.

2. The appears was improved, since otherwise tools appear in 'a pile' at the bottom of the collapsed menu, which wasn't ideal.

3. We felt it matched common mobile experiences which had a hamburger button for showing the menu one side of the toolbar, which other global tools present on the opposite side of the toolbar.

I hope this explains our thinking a bit - if you believe this should be changed, it would helpful to hear your thinking and we can think about making an enhancement...

[timothoms]

Thank you for the clarification and explanation. It seems to me that for the average website, your reasons make sense, but there are cases where the current design has disadvantages. A couple of thoughts:

• For a site which only has one tool in the navbar, the piling is not really an issue. Moreover, in my mind the theme toggle is integral to the site itself, unlike external tools, and it's unlikely to be used a lot by the website visitor after the first visit.

• On small screens, keeping the toggle outside of the menu can take up valuable screen space and look cluttered, as in this screenshot from our in-progress project:

Ideally, the user would have a choice over where to place the tools.

[dragonstyle]

This makes sense- I'll re-open this as an enhancement and see what we can do!

[dragonstyle]

(Thanks for sharing the details and example! Any chance you can share a link to that staging page screenshotted above? It would be useful, but not essential, if I could tinker with that a bit in the browser dev tools to formulate a bit of a game plan)

[timothoms]

Thanks for considering this. The site has not officially launched because we're working on improving content but I can share the staging site on the down-low.