Make sure active nav item in sidebar is visible with scrollIntoView
What does this MR do and why?
Resolves to #404661 (closed) by using scrollIntoView on the NavItem that is_active.
It sets the alignToTop option to false, which means:
the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor
This has the advantage that when the sidebar has a scrollbar, but it isn't required to scroll to see the active nav item, it won't scroll unnecessarily down, just to bring the active nav item to the top as far as possible. This way, we keep the header of the scrollable area (which helps the user to orientate themselves where they are) visible whenever possible.
Screenshots or screen recordings
super_sidebar_flyout_menus feature flag enabled while taking these screen-recordings. It's not default_enabled for everyone just yet. You can review with or without that, it should work in both cases :)
| Before | After |
|---|---|
| recording_1694088727 | recording_1694088178 |
How to set up and validate locally
- Make sure to use the New navigation (Toggle in your user dropdown)
- Go to any project/group or other page with lots of entries in the left sidebar.
- Shrink your browser window height.
- Now navigate to different pages and make sure the active nav item is always visible after page load.
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.