Skip to content

Update super sidebar nav item spacing

Scott de Jonge requested to merge 415343-nav-item-margins into master

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 use gl-gap-3 on parent
  • Set icon slot width to gl-w-6 (24px) and add gl-display-flex
  • Center icon slot content with gl-m-auto
  • Apply changes to menu_section.vue and nav_item.vue

Screenshots or screen recordings

Before After
menu-section-before menu-section-after
nav-item-spacing-before nav-item-spacing-after
nav-item-before nav-item-after
nav-subitem-before nav-subitem-after

How to set up and validate locally

  1. Ensure "new navigation" is enabled
  2. Review nav items in sidebar
  3. Open sidebar menu section, button and child nav items should be aligned correctly
  4. 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.

Related to #415343 (closed) #386470 (closed)

Edited by Scott de Jonge

Merge request reports