diff options
Diffstat (limited to 'app/assets/javascripts/super_sidebar/components/nav_item.vue')
-rw-r--r-- | app/assets/javascripts/super_sidebar/components/nav_item.vue | 15 |
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" |