diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
index 023234c5e..ae7eef6f3 100644
--- a/src/components/Navigator/NavigatorCard.vue
+++ b/src/components/Navigator/NavigatorCard.vue
@@ -36,7 +36,7 @@
v-if="technology"
:id="INDEX_ROOT_KEY"
:url="technologyPath"
- class="technology-title"
+ :class="['technology-title', { 'router-link-exact-active': isTechnologyRoute }]"
@click.alt.native.prevent="toggleAllNodes"
>
@@ -247,6 +247,8 @@ export default {
};
},
computed: {
+ isTechnologyRoute: ({ technologyPath, $route }) => (
+ technologyPath.toLowerCase() === $route.path.toLowerCase()),
politeAriaLive() {
const { hasNodes, navigatorItems } = this;
if (!hasNodes) return '';
diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js
index 4dec4b24e..a3e04a7d7 100644
--- a/tests/unit/components/Navigator/NavigatorCard.spec.js
+++ b/tests/unit/components/Navigator/NavigatorCard.spec.js
@@ -189,6 +189,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(NavigatorC
BaseNavigatorCard,
},
sync: false,
+ mocks: { $route: { path: defaultProps.technologyPath } },
attachToDocument: true,
...others,
});
@@ -370,6 +371,14 @@ describe('NavigatorCard', () => {
});
});
+ it('adds the "router-link-exact-active" class for case insensitive version of technologyPath', async () => {
+ const wrapper = createWrapper();
+ wrapper.setProps({
+ technologyPath: '/documentation/Testkit',
+ });
+ expect(wrapper.find('.technology-title').classes()).toContain('router-link-exact-active');
+ });
+
it('focus the first item if there is no active item', async () => {
const wrapper = createWrapper();
await flushPromises();