Skip to content

[MVC] - Collapsed state for navigation redesign

Details

For the collapsed state of the sidebar with the navigation redesign, we are starting with a version where the sidebar is completely collapsed instead of something like the current minimized collapsed sidebar we offer today. The user will be able to access the sidebar when it is collapsed by hovering over a button in the UI (or the left edge of the page) which will expose the full sidebar in an overlay.

Moving in this direction has the following benefits:
  • Provides additional space and focus when choosing to collapse the sidebar
  • Creates a consistent experience for the sidebar where functionality and patterns do not change between the two states of the sidebar
  • Reduces the dependency on iconography that we have with the current collapsed sidebar today, as once users expose the sidebar they will have the full version that includes labels.
  • Eliminates the need for custom work for the collapsed state on certain pages of the navigation redesign that would have required it (Search, Profile, Settings)
  • Simplifies maintenance of the sidebar as we will only be supporting one primary state (expanded), with only a few minor differences when it is presented in the overlay.
There are some concerns for completely hiding the navigation for the collapsed state:
  • Users lose the affordance of their current context when the breadcrumbs are not in view (if we do not change these to be "sticky")
  • Today, users can see their Assigned Items (Issues, MRs, To-dos) while in the collapsed state, which would require a hover in this new experience.
  • For experienced users within GitLab, iconography may be sufficient and preferred for the sidebar rather than utilizing the expanded version.

Plan for Beta

We will be moving forward with this as the MVC for the collapsed state. Depending on the feedback we receive and any other metrics we identify, we will determine whether or not we need to iterate towards a minimized functional collapsed state like we offer today (#389958).

Implementation Guide

Resources

General guidelines

  • Include a sidebar button (icon here) in the top of the sidebar that collapses the sidebar.
  • Include a tooltip for the sidebar button for each state (see designs)
  • Automatically collapse the sidebar on viewports < 1200px (as we do today)
  • If a user has collapsed the sidebar, respect this preference across pages (as we do today)
  • Keep the sidebar expanded by default on certain pages (while the viewport is ≥ 1200px), regardless if a user has previously collapsed the sidebar. The user can still choose to collapse the sidebar while on these pages, though the preference will not be maintained. This exposes important information on these pages that a user may not know exists otherwise.
    • Global Search
    • Profile pages
    • Help page
    • Settings pages
  • [probably needs split into separate issue] Add a keyboard shortcut for expanding/collapsing the sidebar (s is one option). Note: Global Search currently uses s along with /, but since we have moved towards promoting / we can consider removing s as an additional option for this.
  • [probably needs split into separate issue] Add metrics to capture usage of the product with the collapsed state (this will be important as it can help inform our decisions for #389958)

When collapsing the sidebar...

  • Animate the sidebar closed while expanding the page content to fill the space (respecting Fixed vs Fluid layouts)
  • The sidebar button moves to being positioned in top left of page (not fixed positioning at this point, we need to first evaluate the current fixed elements and determine how this could work with those).
  • If the user is on the Fluid layout, or if on Fixed and the page is ≤ 990 (our current max-width for Fixed page content), the sidebar button is displayed within the breadcrumbs (see design for Fluid)
  • Hovering over the sidebar button exposes the sidebar within an overlay – note: there are some slight differences in the design of sidebar when it is shown in the overlay (see designs).
  • Hovering over the far left of the page (16px out from edge) exposes the sidebar within an overlay.
  • Clicking the sidebar button expands/re-pins the sidebar to it's default state.

When expanding the sidebar...

  • Animate the sidebar open/re-pinned while condensing the page content to fill the space (respecting Fixed vs Fluid layouts)
  • If an additional sidebar button was shown in the DOM (ex: in breadcrumbs), hide it.

Accessibility

  • The overlay/disclosure version of the sidebar will not show on focus, only hover. For the focus state, we will show the tooltip and aria-attributes should be utilized for screenreaders describing what clicking the button does.
  • Hover State: Ensure we account for users who accidentally move their mouse off the sidebar so that is doesn't immediately close
  • Hover State: Ensure the sidebar persists when interacting with various elements/menus within the sidebar
  • Hover State: Ensure the pointer can be moved to the sidebar content once it is shown by the trigger element (button and left portion of screen) without the content disappearing
Edited by Nick Brandt