1 files changed, 12 insertions, 3 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index ec1c4069b1a..0ee9db10ee2 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -51,6 +51,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    isSubitem: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     pillData() {
@@ -99,6 +104,7 @@ export default {
       return {
         'gl-py-2': this.isPinnable,
         'gl-py-3': !this.isPinnable,
+        'gl-mx-2': this.isSubitem,
         [this.item.link_classes]: this.item.link_classes,
         ...this.linkClasses,
       };
@@ -106,6 +112,9 @@ export default {
     navItemLinkComponent() {
       return this.item.to ? NavItemRouterLink : NavItemLink;
     },
+    iconClasses() {
+      return this.isSubitem === true ? 'gl-ml-2 gl-mr-4' : 'gl-w-6 gl-mx-3';
+    },
   },
 };
 </script>
@@ -128,7 +137,7 @@ export default {
         style="width: 3px; border-radius: 3px; margin-right: 1px"
         data-testid="active-indicator"
       ></div>
-      <div class="gl-flex-shrink-0 gl-w-6 gl-mx-3">
+      <div :class="iconClasses" class="gl-flex-shrink-0">
         <slot name="icon">
           <gl-icon v-if="item.icon" :name="item.icon" class="gl-ml-2 item-icon" />
           <gl-icon
@@ -138,14 +147,14 @@ export default {
           />
         </slot>
       </div>
-      <div class="gl-pr-8 gl-text-gray-900 gl-truncate-end">
+      <div class="gl-flex-grow-1 gl-text-gray-900 gl-truncate-end">
         {{ item.title }}
         <div v-if="item.subtitle" class="gl-font-sm gl-text-gray-500 gl-truncate-end">
           {{ item.subtitle }}
         </div>
       </div>
       <slot name="actions"></slot>
-      <span v-if="hasPill || isPinnable" class="gl-flex-grow-1 gl-text-right gl-mr-3 gl-relative">
+      <span v-if="hasPill || isPinnable" class="gl-text-right gl-mr-3 gl-relative">
         <gl-badge
           v-if="hasPill"
           size="sm"