Add latest changes from gitlab-org/gitlab@master

2 files changed, 25 insertions, 4 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 7f5cce8341f..5e0f8fffb0e 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -142,6 +142,9 @@ export default {
     navItemLinkComponent() {
       return this.item.to ? NavItemRouterLink : NavItemLink;
     },
+    hasAvatar() {
+      return Boolean(this.item.entity_id);
+    },
     avatarShape() {
       return this.item.avatar_shape || 'rect';
     },
@@ -155,6 +158,22 @@ export default {
         title: this.item.title,
       });
     },
+    activeIndicatorStyle() {
+      const style = {
+        width: '3px',
+        borderRadius: '3px',
+        marginRight: '1px',
+      };
+
+      // The active indicator is too close to the avatar for items with one, so shift
+      // it left by 1px.
+      //
+      // The indicator is absolutely positioned using rem units. This tweak for this
+      // edge case is in pixel units, so that it does not scale with root font size.
+      if (this.hasAvatar) style.transform = 'translateX(-1px)';
+
+      return style;
+    },
   },
   mounted() {
     if (this.item.is_active) {
@@ -189,7 +208,7 @@ export default {
         :class="[isActive ? 'gl-opacity-10' : 'gl-opacity-0']"
         class="active-indicator gl-bg-blue-500 gl-absolute gl-left-2 gl-top-2 gl-bottom-2 gl-transition-slow"
         aria-hidden="true"
-        style="width: 3px; border-radius: 3px; margin-right: 1px"
+        :style="activeIndicatorStyle"
         data-testid="active-indicator"
       ></div>
       <div v-if="!isFlyout" class="gl-flex-shrink-0 gl-w-6 gl-display-flex">
@@ -201,7 +220,7 @@ export default {
             class="gl-m-auto gl-text-gray-400 js-draggable-icon gl-cursor-grab show-on-focus-or-hover--target"
           />
           <gl-avatar
-            v-else-if="item.entity_id"
+            v-else-if="hasAvatar"
             :size="24"
             :shape="avatarShape"
             :entity-name="item.title"
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index 83c0419664a..fe3e4a8199e 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -158,9 +158,11 @@ export default {
         class="contextual-nav gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-overflow-hidden"
       >
         <div class="gl-flex-grow-1 gl-overflow-auto" data-testid="nav-container">
-          <div class="gl-px-5 gl-pt-3 gl-pb-2 gl-font-weight-bold gl-font-sm gl-text-gray-500">
+          <h2
+            class="gl-px-5 gl-pt-3 gl-pb-2 gl-m-0 gl-reset-line-height gl-font-sm super-sidebar-context-header"
+          >
             {{ sidebarData.current_context_header }}
-          </div>
+          </h2>
 
           <sidebar-menu
             v-if="menuItems.length"