Skip to content

Super sidebar peek on viewport edge hover

What does this MR do and why?

The user will be able to access the sidebar when it is collapsed by hovering over the left edge of the page which will expose the full sidebar in an overlay.

  • Add hover area which toggles isPeek state on mouseover
  • Add 150ms delay to isPeek to compensate for unintentional triggers
  • Decrease transition to 100ms when peeking
  • Replace super sidebar border-right with box-shadow when peeking
  • Move isCollapsed to isInert computed property include !isPeek
  • Add hasCollapseButton prop to <user-bar> to hide when peeking
  • Add ease-out to super sidebar transform transition

Screenshots or screen recordings

CleanShot_2023-03-28_at_12.00.15

How to set up and validate locally

  • Enable the feature flag in rails console with rails c
Feature.enable(:super_sidebar_nav)
  • Enable the "New navigation" setting toggle from the user dropdown

CleanShot_2023-01-24_at_17.50.44_2x

  • Collapse the sidebar
  • Move mouse to viewport left edge

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #390773 (closed)

Edited by Scott de Jonge

Merge request reports