Skip to content

Update new navigation nav item badge positon and hover styles

What does this MR do and why?

Update new navigation nav item badge positon and hover styles to resolve position issue from !119083 (merged)

  • Update class from count-pill to nav-item-badge for clarity
  • Add nav-item-badge, gl-absolute, gl-top-2, and gl-right-0 classes conditionally when isPinnable is true

Screenshots or screen recordings

Before After
nav-item-before-your-work nav-item-after-your-work
nav-item-before-project nav-item-after-project

How to set up and validate locally

  1. Enable super sidebar (if not currently on)
    1. In rails c enable feature flag Feature.enable(:super_sidebar_nav)
    2. Toggle on "new navigation" in user menu
  2. View "Your work" navigation e.g. http://127.0.0.1:3000/dashboard/todos
  3. View pinnable items navigation e.g. http://127.0.0.1:3000/flightjs/Flight/-/issues

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Scott de Jonge

Merge request reports