Nav Switch Context fix focus

Changelog: changed

app/assets/javascripts/super_sidebar/components/context_switcher.vue

@@ -194,6 +194,7 @@ export default {
               :key="item.link"
               :item="item"
               :link-classes="{ [item.link_classes]: item.link_classes }"
+              is-subitem
             />
           </ul>
         </li>

app/assets/javascripts/super_sidebar/components/groups_list.vue

@@ -64,7 +64,7 @@ export default {
     :search-results="searchResults"
   >
     <template #view-all-items>
-      <nav-item v-bind="viewAllProps" />
+      <nav-item v-bind="viewAllProps" is-subitem />
     </template>
   </search-results>
   <frequent-items-list
@@ -75,7 +75,7 @@ export default {
     :pristine-text="$options.i18n.pristineText"
   >
     <template #view-all-items>
-      <nav-item v-bind="viewAllProps" />
+      <nav-item v-bind="viewAllProps" is-subitem />
     </template>
   </frequent-items-list>
 </template>

app/assets/javascripts/super_sidebar/components/items_list.vue

@@ -24,6 +24,7 @@ export default {
       :key="item.id"
       :item="item"
       :link-classes="{ 'gl-py-2!': true }"
+      is-subitem
     >
       <template #icon>
         <project-avatar
@@ -32,6 +33,7 @@ export default {
           :project-avatar-url="item.avatar"
           :size="24"
           aria-hidden="true"
+          class="gl-mr-n2"
         />
       </template>
       <template #actions>

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

app/assets/javascripts/super_sidebar/components/projects_list.vue

@@ -65,7 +65,7 @@ export default {
     :search-results="searchResults"
   >
     <template #view-all-items>
-      <nav-item v-bind="viewAllProps" />
+      <nav-item v-bind="viewAllProps" is-subitem />
     </template>
   </search-results>
   <frequent-items-list
@@ -76,7 +76,7 @@ export default {
     :pristine-text="$options.i18n.pristineText"
   >
     <template #view-all-items>
-      <nav-item v-bind="viewAllProps" />
+      <nav-item v-bind="viewAllProps" is-subitem />
     </template>
   </frequent-items-list>
 </template>