Make interacting with the navigation sidebar seamless
Problem to solve
The button used to hide / show the navigation sidebar was introduced in !110868 (merged). While dogfooding that experience in the Alpha, an unacceptable user experience arose in 3 problem areas.
- Smaller breakpoints with overlapping content
- Accessing the navigation sidebar from the middle of a page
- Accommodating sticky headers and contextual sidebars (Issues / Merge requests)
Proposal
- Must have: Make the breadcrumb always fluid
- Must have: Add a sticky header to every GitLab page, with a few exceptions
- Must have: All page content will be set to 1200px max on fixed width → !113068 (closed)
-
Really nice to have: Add navigation peek on
:hover→ #390773 (closed) - Nice-to-have: Move any global alerts / broadcast messages to appear above the page content (not sticky)
Open Figma → Ultra wide | XL | LG | MD | XS |
Opportunities to address
Some pages have different max-width on fixed
↳ All pages will be set to 1200px unless set to fluid. → Draft: Streamline fixed container width (!113068 - closed)
How will the button to follow the user as they scroll down the page?
↳ The button will move into the sticky header or be accessible by hotspot on the left side of the page or by keyboard shortcut (#390773 (closed)).
↳ Related: Super sidebar toggle placement when collapsed (#392976 - closed)
How will the button be visible on pages without a breadcrumb?
↳ All pages will have a breadcrumb moving forward. While not specifically a piece of the breadcrumb component, the button to show the sidebar will always appear in the top left hand corner when the navigation sidebar is hidden from view.
↳ Related: Add breadcrumbs to all pages in GitLab that nee... (&10032 - closed)
Should the sidebar be opened by default?
↳ Sometimes. If it's not then it might be confusing what to do next without it, especially when jumping contexts. If the viewport size (tbd - Large?) can comfortably fit the sidebar, then show it. For example, going from a project into my user settings.
↳ Related: Allow pages to expand the super sidebar by default (#391285 - closed)
How can we prevent the page from adjusting too frequently when navigating?
↳ Users should be able to peek into the navigation sidebar through an overlay accessible by hover.
↳ Related: Super sidebar peek on viewport edge hover (#390773 - closed)