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 onmouseover
- Add
150ms
delay toisPeek
to compensate for unintentional triggers - Decrease transition to
100ms
when peeking - Replace super sidebar
border-right
withbox-shadow
when peeking - Move
isCollapsed
toisInert
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
- 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