Skip to content
Snippets Groups Projects
Commit d7b3ffbf authored by Sascha Eggenberger's avatar Sascha Eggenberger :speech_balloon:
Browse files

Nav Switch Context fix focus

Changelog: changed
parent 4ab2d88e
No related branches found
No related tags found
1 merge request!121930Navigation: Switch Context focus improvements
......@@ -194,6 +194,7 @@ export default {
:key="item.link"
:item="item"
:link-classes="{ [item.link_classes]: item.link_classes }"
is-subitem
/>
</ul>
</li>
......
......@@ -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>
......@@ -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>
......
......@@ -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
......
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment