Add contextual sidebar guidelines
Add explanation of the contextual sidebar behavior across different breakpoints (when it collapses, when a cookie is set, when it overflows content etc)
From when it was first implemented (https://gitlab.com/gitlab-org/gitlab-ce/issues/36093#note_37274176):
1200px
and up)
On a large viewports (You can choose to have the sidebar always displayed, or always collapsed. Each time you click the collapse/expand button, a cookie is set to remember your choice.
768px
- 1199px
)
On a small & medium viewports (There is no longer enough room for the main page content to fit comfortably, so the sidebar collapses, regardless of your cookie preference (this was especially important for pages that have a right sidebar as well, like the issue page or MR page, or pages where we have a lot of horizontal content, like the CI tables). When you toggle the sidebar to see all the text, it will overlap the screen instead of pushing the content. In this state, the button no longer sets/unsets the cookie, so when you expand the screen once more, your preference should still be saved (for example, the sidebar should go full-width again if that's what you originally had it on)
767px
)
On extra small viewports (up to The mobile sidebar is enabled, which always overlaps the content, adds the semi-transparent overlay, and always displays the full sidebar, again regardless of whether you have the collapsed version set as your preference.
Note- breakpoints.js
is currently using Bootstrap 3 breakpoints so we're currently in the process of updating those https://gitlab.com/gitlab-org/gitlab-ce/issues/56745