Collapse left nav when resizing the browser to small width
Right now, the left nav in the documentation mimics the left nav in the product. In the lower left, you can select "Collapse sidebar," which makes the sidebar slide to the left.
Ideally we would like a responsive left nav that disappears when the browser window is small. Rather than manually clicking the arrows, it would hide itself automatically.
For example, on this page in the GitHub docs, as you resize, you can watch as:
- The right nav jumps to the top of the page.
- The left nav disappears and becomes accessible via a "hamburger" menu in the top right.
Our docs are close to having this behavior. As you resize, the right nav jumps to the top of the page. However, it's then hidden by our left nav.
To see this behavior, go to this page at a large full screen size and start to decrease the browser width.
- The right nav jumps to the top of the page.
- The left nav never disappears, and it hides the right nav that's now at the top.
If you collapse the left nav, you can see a collapsed right nav:
And you can expand it:
This issue is to determine what needs to be done to make the left nav responsive.
- Can we keep the pretty "collapse sidebar" functionality, but collapse it dynamically?
- Or do we need to remove that functionality?
Ideally our site would work similarly to the linked site above. On resize, the right nav goes to the top and is indented properly. The left nav disappears but can be brought back by clicking the "hamburger."
If this work needs to be pared down into multiple issues/MRs, it can be. For example:
- Removing collapse functionality.
- Adding responsiveness.
- Figuring out how to add the left nav back when you click the hamburger.
- Making the left nav that's now at the top have the correct indentation.
A related next step is:
- Make left nav less jumpy: #959 (closed)