User:AHollender (WMF)/sandbox/collapsible menus response

Hey @IAmChaos — ok right, so this is related to your earlier comment about the width of the header. So how we've currently setup the page layout is:

- there's a max-width for the entire page, which is currently 1514px. This is the max-width that the site-header, sticky header, and footer all have

- there is a max-width for the page content, which is currently 1244px for pages that have a table of contents, or 960px for pages that do not. Again, this max-width is the result of first establishing a comfortable line-length for the article text, then finding a reasonable width for the table of contents. Once we move the tools menu to the other side of the page, if you decide to pin the tools menu this max-width will then be 1514px and everything will be balanced. To explain visually:

Currently this is the situation, with the blank space you're noticing called out in red:

However if your screen is less than 1325px wide (which most laptops are), there is no longer a blank space:

Once we move the tools menu to the other side of the page, if you decide to pin the tools menu this max-width will then be 1514px and everything will be balanced:

Unfortunately, aside from having the tools menu pinned, there's not really an easy way to make these max-widths match. The easiest thing to explore would be limiting the max-width of the site header to 1244px. However if we did this, and then you decided to pin the page tools, the max-width of the site header would have to change in order to stay aligned.

I hope this is helpful. I can promise you that we are also concerned about possible imbalances in the page layout, are keeping a close eye on this, and are on the lookout for opportunities to achieve better harmony. Your comments are super helpful to us as we continue to explore our options here.

Thank you all for providing valuable feedback regarding the table of contents, article tools menu, and main menu. We've made some updates to how these menus will work, particularly the interactions of hiding the menus, as well as "pinning" them to the sidebars, which we would like to share with you.

To summarize the feedback we heard:

When you hide a menu it should hide completely (without having to click a second time)
When you hide a menu it should be more obvious where it has gone
The hamburger menu icon should disappear when the main menu is moved to the sidebar
The labels for hiding/moving the menus should be better (or use icons instead)
The tools menu, if it has been moved to the sidebar, should remain visible as you scroll down the page
The tools menu, table of contents, and main menu should hide automatically when the screen gets narrow
You should be able to collapse the table of contents manually, at any screen size

We've attempted to address all of the points above in this updated prototype. Keep in mind that the prototype is not perfect. Hopefully it is sufficient to communicate the main ideas. Please play around with the three menus (table of contents, tools menu, main menu) and let us know what you think.

Prototype links

Deutsch: https://di-collapsible-menus.web.app/Erde?de

English: https://di-collapsible-menus.web.app/Earth

Nederlands: https://di-collapsible-menus.web.app/Aarde_(planeet)?nl

Tiếng Việt: https://di-collapsible-menus.web.app/Tr%C3%A1i_%C4%90%E1%BA%A5t?vi

Español: https://di-collapsible-menus.web.app/Tierra?es

Français: https://di-collapsible-menus.web.app/Terre?fr

Italiano: https://di-collapsible-menus.web.app/Terra?it

Polski: https://di-collapsible-menus.web.app/Ziemia?pl

Svenska: https://di-collapsible-menus.web.app/Jorden?sv

Pусский: https://di-collapsible-menus.web.app/%D0%97%D0%B5%D0%BC%D0%BB%D1%8F?ru

Yкраїнська: https://di-collapsible-menus.web.app/%D0%97%D0%B5%D0%BC%D0%BB%D1%8F?uk

فارسی: https://di-collapsible-menus.web.app/%D8%B2%D9%85%DB%8C%D9%86?fa

中文: https://di-collapsible-menus.web.app/%E5%9C%B0%E7%90%83?zh

日本語: https://di-collapsible-menus.web.app/%E5%9C%B0%E7%90%83?ja

한국어: https://di-collapsible-menus.web.app/%EC%A7%80%EA%B5%AC?ko