📘 DOC: Move ThemeToggleButton to fixed position on mobile

[jasikpark]

Currently, we put the MoreMenu.astro at the bottom of the page on mobile views, which means that they only rarely get seen..

Two options would be:

1. Moving the theme toggle to a fixed floating position, replicating https://fasterthanli.me's setup
2. Moving the theme toggle to the navigation menu

[aFuzzyBear]

I will explore both and get back to you

[sarah11918]

Ping @aFuzzyBear @tony-sull & @delucis on this, to decide whether this is something to explore/keep on the stack!

[aFuzzyBear]

when I did take a look at this the theme toggle changed and took hold else whr, we can revisit this for sure, since I can't see the dark mode on the mobile

[delucis]

I don’t think it’s a high priority, but it is something we could address at some point.

We do now show the “More” menu as part of the top table of contents on mobile, but don’t include the theme toggle. (I’m actually not 100% on giving the more menu such priority on mobile, but that’s a side quest we’ll ignore for now.)

Real estate is at a bit of a premium on mobile. Overview of how a few other docs sites handle this:

• Vue: toggle in the main nav bar, on mobile this is moved to a pop-up nav menu

• Solid: toggle in the main nav bar, nav bar scrolls horizontally on mobile so you can scroll across to the toggle (if you know it’s there)

• Preact: No toggle, dark/light mode syncs with the system preference and that’s it

• React & Svelte: no dark mode, no problems

If I were to tackle this, I’d probably do a more holistic re-organisation of stuff:

1. Move the “More” menu back to the bottom of pages — it’s not important enough to need to be right up top.

2. On mobile, make the pop-up menu categories collapse like the menu on Vue’s site

3. Put the toggle at the bottom of the pop-up menu (again like Vue does)

[sarah11918]

I like @delucis 's suggestions, and confirming @aFuzzyBear 's observation that I can't see the toggle on mobile.

Since this original Issue, the More menu seems to have been moved to the top of the page, directly after what would normally be the Right Sidebar. So, if we choose not to envision a complete redesign at this point, can we confirm the immediate issues to address here are:

1. Is the More menu too obtrusive for mobile, occuring before page content? (Especially when "Right Sidebar" can be quite long!)
2. Do we want the light/dark toggle on mobile (because it's not actually there right now), and if so, where do we put it?

[tony-sull]

Would it make sense to to move the language picker into the menu drawer on mobile?

That could give space for the theme toggle in the top header bar and let the language picker have the full screen width so it doesn't get cropped

[delucis]

I personally feel like choosing the language you understand is probably a higher priority task than switching theme. If we hide the language switcher I think some users would likely assume the docs were only available in English.

[yanthomasdev]

Maybe we can do something similar to what we are doing with the Community Menu component? (placing it in LeftSidebar on medium viewports and on the hamburger menu on smaller ones) Here's a pretty basic example of how it would look:

Tablet	Smartphone

Another solution for medium screens is to add it to the header (Our current breakpoints avoid any problems happening with the theme selector being part of the header, so we don't have to add more breakpoints, yay!)

Instead of placing it on top, we can move it to the bottom, but I guess it would be harder to actually discover we have a theme selector?

I would love to make a PR for this, just want to be sure of what you guys think of my solution.

[delucis]

Nice work @Yan-Thomas! Love the screenshots and gathering feedback like this 💜

I think on small screens the theme toggle should definitely go inside the pop-up menu, but I’d put it at the bottom of the menu rather than at the top. I like how the mobile menu on the Vue site handles this for example (https://vuejs.org/). I’m also in favour of collapsing menu sections on mobile at some point so even if this is at the bottom, it would be a little less buried.

I kind of like your medium screen solution too, so maybe the best solution could be:

1. Mobile: Theme toggle at the bottom of the pop-up menu
2. Medium & larger: Theme toggle in the top bar

There might also still be a grey area where the menu switches to the left sidebar but there’s no room in the top bar yet? In that case I’d show the toggle on the bottom of the left sidebar still for consistency with the mobile view (three different positions across screen sizes seems one too many 😅)

[yanthomasdev]

Thanks for the feedback, @delucis!

Mobile: Theme toggle at the bottom of the pop-up menu Medium & larger: Theme toggle in the top bar

I like this!

I’m also in favour of collapsing menu sections on mobile at some point so even if this is at the bottom, it would be a little less buried.

The collapsable sections would be so nice, this would make CommunityMenu more visible as well. I can do this as a follow-up PR/issue!

(looks like I just found more sidebar-related stuff to PR, yay!)

[yanthomasdev]

Here is the PR: https://github.com/withastro/docs/pull/735

[delucis]

Done in #735. Thanks @Yan-Thomas! 🥳