Adjust the logic to escape the navigation overlay between md - xl
Problem to solve
Using the former breakpoint structure can cause some frustration because there is no minimized sidebar rail for navigation.
Proposal
As a MVC start with something that can address an acute pain point by making it easier to escape the navigation sidebar when it is shown.
Clicking outside of the sidebar does not hide it between 768 and 1119px.
⚠ ️ This can be frustrating when trying to move around the navigation and jumping back into a page.
In order to refine this issue beyond the MVC, it will require a deeper evaluation to expand the guidelines set by the design system gitlab-org/gitlab-services/design.gitlab.com#1556 (closed).
Breakpoint logic
Pajamas breakpoints
xl : ≥1200px
- If the user did not hide the sidebar, it will open automatically once the viewport hits 1200px
lg : ≥992px
- Once below 1200px the sidebar will be hidden.
⚠ ️ This leads to users not initially seeing the sidebar when on smaller screens. - Sidebar sits on top of the page.
⚠ ️ This can be quite annoying when trying to read content. - Clicking outside of the sidebar does not hide it.
⚠ ️ This can be frustrating when trying to move around the navigation. - Issue right sidebar will collapse once under 992px
md : ≥768px
- Once below 768px, the sidebar sits on top as an overlay. Clicking on the background will hide the sidebar again.
- Issue right sidebar now sits on top rather than pushing the body to fit
- Hover flyouts no longer possible
sm : ≥576px xs : <576px
- Once below 576px, the issue right sidebar rail is gone and is replaced by a button
⏪
Edited by Austin Regnery