diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue index ad2111140a13b12884332f6f4bd5f91bc74b7bba..d1297b1957906c67430c5166d4d54734f60268e8 100644 --- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue +++ b/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> diff --git a/app/assets/javascripts/super_sidebar/components/groups_list.vue b/app/assets/javascripts/super_sidebar/components/groups_list.vue index 4fa15f1cd76dec4fee33b40d595731e611556cd2..48becacebb74f9380733e676f04d96b666d2b0b5 100644 --- a/app/assets/javascripts/super_sidebar/components/groups_list.vue +++ b/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> diff --git a/app/assets/javascripts/super_sidebar/components/items_list.vue b/app/assets/javascripts/super_sidebar/components/items_list.vue index 46f27dd7d06492851675dbd3443358dc8739b9bb..7d5af8836514683f2666e5a0ee9c1536434f4b11 100644 --- a/app/assets/javascripts/super_sidebar/components/items_list.vue +++ b/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> diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue index ec1c4069b1a2b7be9f07d9aa6d146522fa28a0c1..90a040b97f765566beb9efccaffa566307f8c9b0 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 diff --git a/app/assets/javascripts/super_sidebar/components/projects_list.vue b/app/assets/javascripts/super_sidebar/components/projects_list.vue index 78860e35eb1a738bb0227e883084cb11a4526dc9..8d1a5c825b502ae41f9caee9327f15f92aba90d5 100644 --- a/app/assets/javascripts/super_sidebar/components/projects_list.vue +++ b/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>