Make sidebar collapsible on medium-sized screens

[ahelwer]

Summary

I have a monitor in portrait (vertical) orientation, which is very useful for reading documentation websites such as MDN. However, this means horizontal space is at a premium. With the new MDN design about a third of the horizontal space is taken up by the navigation sidebar + padding:

Contrast with the old design (from archive.org):

Many documentation websites & themes provide the ability to collapse the navigation sidebar for this reason. It would be nice if MDN did the same.

Where did you spot the bug?

All MDN documentation pages, for example https://developer.mozilla.org/en-US/docs/WebAssembly

What is the problem?

Lack of horizontal space caused by navigation sidebar makes website unusable on portrait (vertical) monitors.

What did you expect to happen?

I expected to be able to collapse the navigation sidebar so the content takes up the full horizontal space.

Steps to reproduce the issue

1. Select your monitor orientation as portrait
2. Visit a MDN page such as https://developer.mozilla.org/en-US/docs/WebAssembly

Environment

Firefox on Windows 10

Device

• [x] Desktop
• [ ] Mobile: ...
• [ ] Tablet: ...
• [ ] Other: ...

Browser

• [ ] Chrome: (what version?)
• [x] Firefox: 97.0.1
• [ ] Safari: (what version?)
• [ ] Other: (what browser / version?)

Operating system

• [x] Windows: 10
• [ ] Mac OS: (what version?)
• [ ] Linux: (what distribution / version?)

Screenshots

[schalkneethling]

Thank you for reporting @ahelwer

[caugner]

@ahelwer Can you share what resolution you're using on the vertical monitor?

PS: As a workaround, you could zoom in to 120-130% to trigger mobile mode.

[ahelwer]

2160p

[mfiro]

Is there any update on this? The current design is just annoying. more than a fifth of vertical space is taken by the fixed header and a third of horizontal space by the side bar.