What is the best UI/UX to make the sidebar toggle buttons accessible as you scroll down?

[choldgraf]

Currently, we have sidebar toggle buttons on mobile that hide as you scroll down the page. This is kind-of annoying because you often want access to those buttons from other parts of the page (in particular, for the in-page table of contents).

However, it's not clear to me what is the right UX. Here are a few options and I'm curious if folks have opinions. I'll share a few options below and there's a poll at the bottom!

Option 1: Nest them in the header

Put them inside the header, but then users need to make a second click to expand the header before clicking the sidebar toggle

Option 2: Put them at the bottom of the header and always visible

Make them stick to the top under the header, but then we are taking up more vertical space for menu items.

Option 3: Do some JavaScript hacking to show the buttons on a scroll-up event

Make them show under the header via a "scroll up event" and a JavaScript hook, but that is some extra complexity and hackiness. This would be kind-of like Option 2, but they'd only show up when the user scrolled up.

Option 6 (not in poll): Put the toggle buttons on either side of the header

If you like this idea, 👍 this comment: #800 (reply in thread)

here's a demo:

Option 7 (not in poll): Put the buttons on either side of the header toggle

If you like this idea, 👍 this comment: #800 (reply in thread)

here's a demo:

Option 8 (not in poll): Put the buttons on either side of the header

If you like this idea, 👍 this comment: #800 (reply in thread)

here's a demo:

[tupui]

I like option 2 the best as clearer from a user perspective. Just not a fan of the added line.

What about moving the 2 buttons on each side of the hamburger?

[choldgraf]

Ah interesting - you mean like this?

[choldgraf]

or this?

[choldgraf]

or this? (I believe this is actually the first demo that @12rambau had tried...I am coming around to it haha)

[12rambau]

As you can imagine my favorite is option 6 as it was my first attempt when I drafted #726. In case that's not an option I think option 2 is legit (thus my vote). Cellphones screen are huge now (I'm still struggling to find room for mine in my pockets) so I think we can afford the extra "sub header". At the moment it's 2/3 of the normal header height but we can also make it smaller.

[choldgraf]

@12rambau thoughts on this?

Note that the "arrow with line" is not free with FontAwesome, so I think our best bet would be to use one of:

• Octicons https://primer.style/octicons/upload-24 .
• Material icons: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Astart%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048

And rotate it to be the right direction. But that's probably only worth it if people really like it better

[12rambau]

I was using the indent icon because the menu one was already taken by the collapsing btn and because Furo is using it in its documentation. Here is the list of all the available arrows in fa: https://fontawesome.com/v5/search?q=arrow%20left&m=free
In general, I like to stick to one icon lib for consistency, sizing, etc... but if people really feel it's difficult to understand I don't have any problem using another.
Do you think a tooltip could help ?

[drammock]

if the nice arrow is non-free, we can stick with the one @12rambau proposed and Furo is already using. It's not that bad (not as bad as mixing icon sets IMO)

[choldgraf]

Does anybody feel like resolving this should block a pre-release or a release? Or can we keep the current behavior for a bit and see what folks think after they've had some time to use it?

[drammock]

+1 for "merge, test, and adjust if needed"

[choldgraf]

Update - I had an idea for how we could get all of this functionality without changing the general UI structure of the header. Would love thoughts over in this PR:

• ENH: Move header items to sidebar on mobile #834