Update super sidebar nav item spacing
What does this MR do and why?
Update nav item and menu section styles to utilise CSS gap
property and remove manual margin setting on individual children nodes. This should allow for the icon slot to be conditionally rendered without alignment issues (left padding and space between icon and text).
- Update variable vertical padding to use
gl-min-h-7
(32px
) - Update default vertical padding to
gl-py-2
- Remove
gl-m*
classes from child items usegl-gap-3
on parent - Set icon slot width to
gl-w-6
(24px
) and addgl-display-flex
- Center icon slot content with
gl-m-auto
- Apply changes to
menu_section.vue
andnav_item.vue
Screenshots or screen recordings
Before | After |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Ensure "new navigation" is enabled
- Review nav items in sidebar
- Open sidebar menu section, button and child nav items should be aligned correctly
- Open context switcher, projects and groups should be aligned correctly
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 #415343 (closed) #386470 (closed)
Edited by Scott de Jonge