[FEATURE] Ajouter un état actif au éléments de la navigation (PIX-2235).

components/PixLink.vue

@@ -69,18 +69,15 @@ function getRelativeLinkPrefix(url) {
   if (!url) {
     return ''
   }
-  let defaultPrefixes
-  if (process.env.isPixPro) {
-    defaultPrefixes = 'https://pro.pix.fr/'
-  } else {
-    defaultPrefixes = 'https://pix.org/,https://pix.fr/'
-  }
+  const defaultPrefixes = process.env.isPixPro
+    ? 'https://pro.pix.fr'
+    : 'https://pix.org,https://pix.fr'
   const relativeLinkPrefixes = (
     process.env.RELATIVE_LINK_PREFIXES || defaultPrefixes
   ).split(',')
   return relativeLinkPrefixes
     .map((relativeLinkPrefix) =>
-      url.startsWith(relativeLinkPrefix) ? relativeLinkPrefix : ''
+      url.startsWith(relativeLinkPrefix) ? `${relativeLinkPrefix}/` : ''
     )
     .filter((relativeLinkPrefix) => relativeLinkPrefix !== '')[0]
 }

components/slices/NavigationZone.vue

@@ -17,6 +17,9 @@
           <button
             :dropdown-index="`${index}`"
             class="dropdown-toggle navigation-zone__item links-group"
+            :class="{
+              'current-active-link': subIsActive(menuItem.subNavigationLinks),
+            }"
             @click="toggleDropdown(`${index}`)"
             @click.stop.prevent
           >
@@ -89,6 +92,16 @@ export default {
         this.openDropdownIndex = dropdownIndex
       }
     },
+    subIsActive(subNavigationLinks) {
+      const paths = subNavigationLinks.map((subNavigationLink) => {
+        const splittedLink = subNavigationLink.link.url.split('/')
+        const linkIndex = splittedLink.length - 1
+        return splittedLink[linkIndex]
+      })
+      return paths.some((path) => {
+        return this.$route.path.includes(path)
+      })
+    },
   },
 }
 
@@ -126,6 +139,15 @@ class Navigation {
 </script>
 
 <style scoped lang="scss">
+@mixin active-link($theme: DarkGray) {
+  border-bottom: 2px solid $blue;
+
+  &:active,
+  &:hover {
+    color: $blue;
+  }
+}
+
 .navigation-zone {
   display: none;
 
@@ -143,8 +165,12 @@ class Navigation {
     }
   }
 
-  .navigation-zone-block:last-child {
-    border-left: 1px solid $grey-20;
+  .navigation-zone-block {
+    height: 24px;
+
+    &:last-child {
+      border-left: 1px solid $grey-20;
+    }
   }
 
   & > div {
@@ -156,6 +182,13 @@ class Navigation {
     align-items: center;
     height: 100%;
 
+    button.dropdown-toggle {
+      height: 30px;
+      &.current-active-link {
+        @include active-link;
+      }
+    }
+
     &__item {
       color: $grey-60;
       font-family: $font-roboto;
@@ -167,13 +200,9 @@ class Navigation {
       padding: 0 8px 10px 8px;
       cursor: pointer;
       white-space: nowrap;
+
       &.current-active-link {
-        border-bottom: 2px solid $blue;
-      }
-      &.current-active-link,
-      &:active,
-      &:hover {
-        color: $blue;
+        @include active-link;
       }
 
       &.links-group {

tests/components/slices/NavigationZone.test.js

@@ -7,6 +7,9 @@ jest.mock('~/services/document-fetcher')
 describe('NavigationZone slice', () => {
   let component
   const get = jest.fn()
+  const $route = {
+    path: '',
+  }
 
   beforeEach(() => {
     documentFetcher.mockReturnValue({
@@ -25,23 +28,24 @@ describe('NavigationZone slice', () => {
   describe('Slice: NavigationZone', () => {
     beforeEach(() => {
       component = shallowMount(NavigationZone, {
+        mocks: { $route },
         stubs: { 'pix-link': true, fa: true },
         propsData: {
           slice: {
             items: [
-              { name: 'Découvrir Pix', link: '/', group: [] },
-              { name: 'Les tests', link: '/tests', group: [] },
+              { name: 'Découvrir Pix', link: { url: '/' }, group: [] },
+              { name: 'Les tests', link: { url: '/tests' }, group: [] },
               {
                 name: 'Enseignement scolaire',
-                link: '/sco',
+                link: { url: '/sco' },
                 group: [{ text: 'Enseignement' }],
               },
               {
                 name: 'Enseignement supérieur',
-                link: '/sup',
+                link: { url: '/sup' },
                 group: [{ text: 'Enseignement' }],
               },
-              { name: 'Pix Pro', link: '/pro', group: [] },
+              { name: 'Pix Pro', link: { url: '/pro' }, group: [] },
             ],
           },
         },
@@ -57,24 +61,24 @@ describe('NavigationZone slice', () => {
       it('should aggregate navigation links of the same group', () => {
         const navigationLinks = component.vm.navigationLinks
         expect(navigationLinks).toEqual([
-          { name: 'Découvrir Pix', link: '/', group: [] },
-          { name: 'Les tests', link: '/tests', group: [] },
+          { name: 'Découvrir Pix', link: { url: '/' }, group: [] },
+          { name: 'Les tests', link: { url: '/tests' }, group: [] },
           {
             name: 'Enseignement',
             subNavigationLinks: [
               {
                 name: 'Enseignement scolaire',
-                link: '/sco',
+                link: { url: '/sco' },
                 group: [{ text: 'Enseignement' }],
               },
               {
                 name: 'Enseignement supérieur',
-                link: '/sup',
+                link: { url: '/sup' },
                 group: [{ text: 'Enseignement' }],
               },
             ],
           },
-          { name: 'Pix Pro', group: [], link: '/pro' },
+          { name: 'Pix Pro', group: [], link: { url: '/pro' } },
         ])
       })
     })