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.
Changes
- Create
super_sidebar_peek
feature flag - Remove
gl-visibility-hidden
class from super sidebar collapsed state - Add hover area which toggles
isPeek
state onmouseover
- Decrease transition to
100ms
when peeking - Replace super sidebar
border-right
withbox-shadow
when peeking - Add
hasCollapseButton
prop to<user-bar>
to hide when peeking - Use
prefers-reduced-motion: no-preference
for transitions - Add
100ms
delay toisPeek
to compensate for unintentional triggers - Move
SUPER_SIDEBAR_PEEK_DELAY
toconstants.js
- Add
setTimeoutSpy
to tests, restorecreateWrapper
on test
Screenshots or screen recordings
Default
Expanded
CleanShot_2023-04-12_at_17.46.27
Collapsed
CleanShot_2023-04-12_at_17.46.01
Reduced motion
Expanded
CleanShot_2023-04-12_at_17.49.26
Collapsed
CleanShot_2023-04-12_at_17.49.10
Closed by
How to set up and validate locally
- Enable super sidebar (if not currently on)
- In
rails c
enable feature flagFeature.enable(:super_sidebar_nav)
- Toggle on "new navigation" in user menu
- In
- Enable peek feature flag
Feature.enable(:super_sidebar_peek)
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #390773 (closed)
Edited by Scott de Jonge