From eb589c856846e1d94f05543cbdf6920abad11e9b Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 14:14:29 +0200
Subject: [PATCH 1/6] Add findByType method to find all main_navigation typed
 document

---
 services/document-fetcher.js            |  7 ++++++
 tests/services/document-fetcher.test.js | 30 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/services/document-fetcher.js b/services/document-fetcher.js
index 419288d21..f22805aa6 100644
--- a/services/document-fetcher.js
+++ b/services/document-fetcher.js
@@ -25,6 +25,13 @@ export function documentFetcher(
   const lang = i18n.locale || i18n.defaultLocale
   return {
     get: getSingle,
+    findByType: async (type) => {
+      const documents = await prismic.api.query(
+        prismic.predicates.at('document.type', type),
+        { lang }
+      )
+      return documents.results
+    },
     getEmployers: async () => {
       const document = await prismic.api.getSingle('employers', {
         lang,
diff --git a/tests/services/document-fetcher.test.js b/tests/services/document-fetcher.test.js
index bf1a8a253..a463393f7 100644
--- a/tests/services/document-fetcher.test.js
+++ b/tests/services/document-fetcher.test.js
@@ -109,4 +109,34 @@ describe('DocumentFetcher', () => {
     expect(prismicPredicates.at).toBeCalledWith('my.slices_page.uid', uid)
     expect(response).toEqual(expectedValue)
   })
+
+  test('#findByType', async () => {
+    // Given
+    const type = 'main_navigation'
+    const expectedValue = [
+      { type: 'main_navigation', navigation_for: 'pix-site' },
+      { type: 'main_navigation', navigation_for: 'pix-pro' },
+    ]
+    const expectedPredicatesAtValue = Symbol('AT')
+    const findMock = () => ({ results: expectedValue })
+    const prismicApi = {
+      query: jest.fn().mockImplementationOnce(findMock),
+    }
+    prismic.api = prismicApi
+
+    const prismicPredicates = {
+      at: jest.fn(() => expectedPredicatesAtValue),
+    }
+    prismic.predicates = prismicPredicates
+
+    // When
+    const response = await documentFetcher(prismic).findByType(type)
+
+    // Then
+    expect(prismicApi.query).toBeCalledWith(expectedPredicatesAtValue, {
+      lang: 'fr-fr',
+    })
+    expect(prismicPredicates.at).toBeCalledWith('document.type', type)
+    expect(response).toEqual(expectedValue)
+  })
 })

From 03a3d712dbc8ee09bd889dcfe1f6b1ba1143fcfc Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 14:30:13 +0200
Subject: [PATCH 2/6] Use findByType method to get the main Navigation

---
 components/NavigationSliceZone.vue | 12 ++++++++----
 store/index.js                     |  4 ++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 57c843a65..9f1af1c01 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -14,7 +14,7 @@
         <div class="navigation-slice-zone__content">
           <div class="navigation-slice-zone-content__left-side">
             <section
-              v-for="(slice, index) in mainNavigation.data.body"
+              v-for="(slice, index) in usedMainNavigation.data.body"
               :key="`navigation-slice-left-${index}`"
             >
               <template v-if="slice.slice_type === 'logos_zone'">
@@ -26,7 +26,7 @@
             </section>
           </div>
           <section
-            v-for="(slice, index) in mainNavigation.data.body"
+            v-for="(slice, index) in usedMainNavigation.data.body"
             :key="`navigation-slice-right-${index}`"
             class="navigation-slice-zone-wrapper__right-side"
           >
@@ -65,11 +65,15 @@ export default {
       return process.env.isPixPro
     },
     ...mapState(['mainNavigation', 'organizationNavItems']),
+
+    usedMainNavigation() {
+      return { ...this.mainNavigation[0] }
+    },
     burgerMenuLinks() {
-      const navigationZone = this.mainNavigation.data.body.find(
+      const navigationZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'navigation_zone'
       )
-      const actionsZone = this.mainNavigation.data.body.find(
+      const actionsZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'actions_zone'
       )
       return [...navigationZone.items, ...actionsZone.items]
diff --git a/store/index.js b/store/index.js
index 1b7b62703..abcd509ab 100644
--- a/store/index.js
+++ b/store/index.js
@@ -51,7 +51,7 @@ export const mutations = {
     state.aboutNavItems = navItems(navigations, 'about-nav')
   },
   updateMainNavigation(state, navigations) {
-    state.mainNavigation = { ...navigations }
+    state.mainNavigation = navigations
   },
   updateHotNews(state, hotNews) {
     state.hotNews = hotNews && hotNews.data ? hotNews.data.description : null
@@ -63,7 +63,7 @@ function getNavigation(prismic, i18n) {
 }
 
 function getMainNavigation(prismic, i18n) {
-  return documentFetcher(prismic, i18n).get(documents.mainNavigation)
+  return documentFetcher(prismic, i18n).findByType(documents.mainNavigation)
 }
 
 function getHotNews(prismic, i18n) {

From e81dacc6001a10ff4cb30791b4b02ca54308d5d6 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 15:15:00 +0200
Subject: [PATCH 3/6] Add Lodash to the project

---
 package-lock.json | 6 +++---
 package.json      | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 99a49871b..33208ddf3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10744,9 +10744,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index 0ba4718c3..cb22217b1 100755
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/prismic": "^1.2.3",
     "chart.js": "2.9.3",
+    "lodash": "^4.17.20",
     "nuxt": "^2.13.3",
     "nuxt-fontawesome": "0.4.0",
     "nuxt-i18n": "6.13.1",

From 87bd8692eef67fc4904db51ee8366412269beaa7 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 15:15:40 +0200
Subject: [PATCH 4/6] Add usedMainNavigation in NavigationSliceZone to choose
 between pix-pro or pix-site nav

---
 components/NavigationSliceZone.vue            |   8 +-
 .../slices/NavigationSliceZone.test.js        | 181 ++++++++++++++++++
 2 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/slices/NavigationSliceZone.test.js

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 9f1af1c01..5bfb313bd 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -43,6 +43,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { groupBy } from 'lodash'
 import LogosZone from '@/components/slices/LogosZone'
 import NavigationZone from '@/components/slices/NavigationZone'
 import ActionsZone from '@/components/slices/ActionsZone'
@@ -67,8 +68,13 @@ export default {
     ...mapState(['mainNavigation', 'organizationNavItems']),
 
     usedMainNavigation() {
-      return { ...this.mainNavigation[0] }
+      const groupBySite = groupBy(this.mainNavigation, 'data.navigation_for')
+      if (this.isPixPro && groupBySite['pix-pro']) {
+        return groupBySite['pix-pro'][0]
+      }
+      return groupBySite['pix-site'][0]
     },
+
     burgerMenuLinks() {
       const navigationZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'navigation_zone'
diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js
new file mode 100644
index 000000000..e8dda4e79
--- /dev/null
+++ b/tests/components/slices/NavigationSliceZone.test.js
@@ -0,0 +1,181 @@
+import { shallowMount } from '@vue/test-utils'
+import NavigationSliceZone from '~/components/NavigationSliceZone'
+
+jest.mock('~/services/document-fetcher')
+
+describe('NavigationSliceZone slice', () => {
+  let component
+  let store
+
+  const expectedSiteNavigation = {
+    data: {
+      navigation_for: 'pix-site',
+      body: [
+        {
+          slice_type: 'logos_zone',
+          slice_label: null,
+          items: [],
+          primary: {},
+        },
+        {
+          slice_type: 'navigation_zone',
+          items: [],
+          primary: {},
+        },
+        {
+          slice_type: 'actions_zone',
+          slice_label: null,
+          items: [],
+          primary: {},
+        },
+      ],
+    },
+  }
+
+  const expectedProNavigation = {
+    data: {
+      navigation_for: 'pix-pro',
+      body: [
+        {
+          slice_type: 'logos_zone',
+          slice_label: null,
+          items: [],
+          primary: {},
+        },
+        {
+          slice_type: 'navigation_zone',
+          items: [],
+          primary: {},
+        },
+        {
+          slice_type: 'actions_zone',
+          slice_label: null,
+          items: [],
+          primary: {},
+        },
+      ],
+    },
+  }
+
+  describe('Slice: NavigationSliceZone', () => {
+    afterEach(() => {
+      process.env = {
+        isPixPro: false,
+      }
+    })
+
+    describe('When we are in pix-site and we have two navigation', () => {
+      beforeEach(() => {
+        store = {
+          state: {
+            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+          },
+        }
+      })
+
+      it('should return the site navigation', () => {
+        // given
+        component = shallowMount(NavigationSliceZone, {
+          mocks: {
+            $store: store,
+          },
+          stubs: {
+            'client-only': true,
+            'push-menu': true,
+            'burger-menu-nav': true,
+            'organization-nav': true,
+            'logos-zone': true,
+            'navigation-zone': true,
+            'actions-zone': true,
+            'pix-pro-sub-nav': true,
+            fa: true,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedSiteNavigation)
+      })
+    })
+
+    describe('When we are in pix-pro and we have two navigation', () => {
+      beforeEach(() => {
+        process.env = {
+          isPixPro: true,
+        }
+        store = {
+          state: {
+            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+          },
+        }
+      })
+
+      it('should return the pro navigation', () => {
+        // given
+        component = shallowMount(NavigationSliceZone, {
+          mocks: {
+            $store: store,
+          },
+          stubs: {
+            'client-only': true,
+            'push-menu': true,
+            'burger-menu-nav': true,
+            'organization-nav': true,
+            'logos-zone': true,
+            'navigation-zone': true,
+            'actions-zone': true,
+            'pix-pro-sub-nav': true,
+            fa: true,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedProNavigation)
+      })
+    })
+
+    describe('When we are in pix-pro and we have only the site navigation', () => {
+      beforeEach(() => {
+        process.env = {
+          isPixPro: true,
+        }
+        store = {
+          state: {
+            mainNavigation: [expectedSiteNavigation],
+          },
+        }
+      })
+
+      it('should return the site navigation', () => {
+        // given
+        component = shallowMount(NavigationSliceZone, {
+          mocks: {
+            $store: store,
+          },
+          stubs: {
+            'client-only': true,
+            'push-menu': true,
+            'burger-menu-nav': true,
+            'organization-nav': true,
+            'logos-zone': true,
+            'navigation-zone': true,
+            'actions-zone': true,
+            'pix-pro-sub-nav': true,
+            fa: true,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedSiteNavigation)
+      })
+    })
+  })
+})

From 3f8d68626d62ca02ea74176b13b038421f836ea9 Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 15:22:30 +0200
Subject: [PATCH 5/6] Hide sub nav in Pix Pro when the main navigation is
 already the pix-pro navigation

---
 components/BurgerMenuNav.vue                  |   6 +-
 components/NavigationSliceZone.vue            |  11 +-
 .../slices/NavigationSliceZone.test.js        | 241 ++++++++++--------
 3 files changed, 153 insertions(+), 105 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index 560cc3027..d7c24d7d5 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -9,7 +9,7 @@
         </li>
       </ul>
     </div>
-    <div v-if="isPixPro" class="nav-middle">
+    <div v-if="isPixPro && showProItems" class="nav-middle">
       <hr class="nav-middle__bar" />
       <p>Pix Pro</p>
       <ul>
@@ -35,6 +35,10 @@ export default {
       type: Array,
       default: null,
     },
+    showProItems: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isPixPro() {
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 5bfb313bd..0e6107d4a 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -5,6 +5,7 @@
         <burger-menu-nav
           :items="burgerMenuLinks"
           :pro-items="organizationNavItems"
+          :show-pro-items="showSubNav"
         />
       </push-menu>
     </client-only>
@@ -36,7 +37,7 @@
           </section>
         </div>
       </div>
-      <pix-pro-sub-nav v-if="isPixPro" :nav-items="organizationNavItems" />
+      <pix-pro-sub-nav v-if="showSubNav" :nav-items="organizationNavItems" />
     </div>
   </div>
 </template>
@@ -65,6 +66,14 @@ export default {
     isPixPro() {
       return process.env.isPixPro
     },
+
+    showSubNav() {
+      return (
+        this.isPixPro &&
+        this.usedMainNavigation.data.navigation_for === 'pix-site'
+      )
+    },
+
     ...mapState(['mainNavigation', 'organizationNavItems']),
 
     usedMainNavigation() {
diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js
index e8dda4e79..76a42a7dd 100644
--- a/tests/components/slices/NavigationSliceZone.test.js
+++ b/tests/components/slices/NavigationSliceZone.test.js
@@ -3,9 +3,20 @@ import NavigationSliceZone from '~/components/NavigationSliceZone'
 
 jest.mock('~/services/document-fetcher')
 
-describe('NavigationSliceZone slice', () => {
+describe('NavigationSliceZone', () => {
   let component
   let store
+  const stubs = {
+    'client-only': true,
+    'push-menu': true,
+    'burger-menu-nav': true,
+    'organization-nav': true,
+    'logos-zone': true,
+    'navigation-zone': true,
+    'actions-zone': true,
+    'pix-pro-sub-nav': true,
+    fa: true,
+  }
 
   const expectedSiteNavigation = {
     data: {
@@ -13,20 +24,15 @@ describe('NavigationSliceZone slice', () => {
       body: [
         {
           slice_type: 'logos_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
         {
           slice_type: 'navigation_zone',
           items: [],
-          primary: {},
         },
         {
           slice_type: 'actions_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
       ],
     },
@@ -38,20 +44,15 @@ describe('NavigationSliceZone slice', () => {
       body: [
         {
           slice_type: 'logos_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
         {
           slice_type: 'navigation_zone',
           items: [],
-          primary: {},
         },
         {
           slice_type: 'actions_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
       ],
     },
@@ -64,117 +65,151 @@ describe('NavigationSliceZone slice', () => {
       }
     })
 
-    describe('When we are in pix-site and we have two navigation', () => {
-      beforeEach(() => {
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
-          },
-        }
+    describe('#usedMainNavigation', () => {
+      describe('When we are in pix-site and we have the site navigation', () => {
+        beforeEach(() => {
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
+        })
+
+        it('should return the site navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
+
+          // when
+          const result = component.vm.usedMainNavigation
+
+          // then
+          expect(result).toEqual(expectedSiteNavigation)
+        })
       })
 
-      it('should return the site navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have the pro navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should return the pro navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedSiteNavigation)
-      })
-    })
+          // when
+          const result = component.vm.usedMainNavigation
 
-    describe('When we are in pix-pro and we have two navigation', () => {
-      beforeEach(() => {
-        process.env = {
-          isPixPro: true,
-        }
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
-          },
-        }
+          // then
+          expect(result).toEqual(expectedProNavigation)
+        })
       })
 
-      it('should return the pro navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have only the site navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should return the site navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedProNavigation)
+          // when
+          const result = component.vm.usedMainNavigation
+
+          // then
+          expect(result).toEqual(expectedSiteNavigation)
+        })
       })
     })
 
-    describe('When we are in pix-pro and we have only the site navigation', () => {
-      beforeEach(() => {
-        process.env = {
-          isPixPro: true,
-        }
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation],
-          },
-        }
+    describe('#showSubNav', () => {
+      describe('When we are in pix-pro and we have the pro navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
+        })
+
+        it('should not show the subNav', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
+
+          // when
+          const result = component.vm.showSubNav
+
+          // then
+          expect(result).toEqual(false)
+        })
       })
 
-      it('should return the site navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have only the site navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should show the subNav', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedSiteNavigation)
+          // when
+          const result = component.vm.showSubNav
+
+          // then
+          expect(result).toEqual(true)
+        })
       })
     })
   })

From e5ed2bc996a2a7d80e5601ea8815bf4100e3349f Mon Sep 17 00:00:00 2001
From: melanieb <melanie.boudard@gmail.com>
Date: Fri, 9 Oct 2020 16:42:43 +0200
Subject: [PATCH 6/6] [Clean] remplace mainNavigation by mainNavigations

Replace the object for the state : https://vuex.vuejs.org/fr/guide/mutations.html#les-mutations-suivent-les-regles-de-reactivite-de-vue
---
 components/NavigationSliceZone.vue               |  4 ++--
 plugins/i18n.js                                  |  2 +-
 store/index.js                                   | 16 ++++++++--------
 .../slices/NavigationSliceZone.test.js           | 10 +++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 0e6107d4a..295f52ca3 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -74,10 +74,10 @@ export default {
       )
     },
 
-    ...mapState(['mainNavigation', 'organizationNavItems']),
+    ...mapState(['mainNavigations', 'organizationNavItems']),
 
     usedMainNavigation() {
-      const groupBySite = groupBy(this.mainNavigation, 'data.navigation_for')
+      const groupBySite = groupBy(this.mainNavigations, 'data.navigation_for')
       if (this.isPixPro && groupBySite['pix-pro']) {
         return groupBySite['pix-pro'][0]
       }
diff --git a/plugins/i18n.js b/plugins/i18n.js
index a5e7b6a15..dbc9b35e6 100644
--- a/plugins/i18n.js
+++ b/plugins/i18n.js
@@ -1,6 +1,6 @@
 export default function ({ app: { $prismic, i18n, store } }) {
   i18n.onLanguageSwitched = () => {
     store.dispatch('updateNavigation', { prismic: $prismic, i18n })
-    store.dispatch('updateMainNavigation', { prismic: $prismic, i18n })
+    store.dispatch('updateMainNavigations', { prismic: $prismic, i18n })
   }
 }
diff --git a/store/index.js b/store/index.js
index abcd509ab..8385ea642 100644
--- a/store/index.js
+++ b/store/index.js
@@ -6,14 +6,14 @@ export const state = () => ({
   aboutNavItems: [],
   hotNews: null,
   host: null,
-  mainNavigation: [],
+  mainNavigations: [],
 })
 export const actions = {
   async nuxtServerInit({ commit }, { app, req }) {
     commit('updateNavigation', await getNavigation(app.$prismic, app.i18n))
     commit(
-      'updateMainNavigation',
-      await getMainNavigation(app.$prismic, app.i18n)
+      'updateMainNavigations',
+      await getMainNavigations(app.$prismic, app.i18n)
     )
     commit('updateHotNews', await getHotNews(app.$prismic, app.i18n))
     commit('updateHost', req)
@@ -21,8 +21,8 @@ export const actions = {
   async updateNavigation({ commit }, { i18n, prismic }) {
     commit('updateNavigation', await getNavigation(prismic, i18n))
   },
-  async updateMainNavigation({ commit }, { i18n, prismic }) {
-    commit('updateMainNavigation', await getMainNavigation(prismic, i18n))
+  async updateMainNavigations({ commit }, { i18n, prismic }) {
+    commit('updateMainNavigations', await getMainNavigations(prismic, i18n))
   },
 }
 export const mutations = {
@@ -50,8 +50,8 @@ export const mutations = {
     state.resourcesNavItems = navItems(navigations, 'ressources-nav')
     state.aboutNavItems = navItems(navigations, 'about-nav')
   },
-  updateMainNavigation(state, navigations) {
-    state.mainNavigation = navigations
+  updateMainNavigations(state, navigations) {
+    state.mainNavigations = [...navigations]
   },
   updateHotNews(state, hotNews) {
     state.hotNews = hotNews && hotNews.data ? hotNews.data.description : null
@@ -62,7 +62,7 @@ function getNavigation(prismic, i18n) {
   return documentFetcher(prismic, i18n).get(documents.navigation)
 }
 
-function getMainNavigation(prismic, i18n) {
+function getMainNavigations(prismic, i18n) {
   return documentFetcher(prismic, i18n).findByType(documents.mainNavigation)
 }
 
diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js
index 76a42a7dd..76924512d 100644
--- a/tests/components/slices/NavigationSliceZone.test.js
+++ b/tests/components/slices/NavigationSliceZone.test.js
@@ -70,7 +70,7 @@ describe('NavigationSliceZone', () => {
         beforeEach(() => {
           store = {
             state: {
-              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+              mainNavigations: [expectedSiteNavigation, expectedProNavigation],
             },
           }
         })
@@ -99,7 +99,7 @@ describe('NavigationSliceZone', () => {
           }
           store = {
             state: {
-              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+              mainNavigations: [expectedSiteNavigation, expectedProNavigation],
             },
           }
         })
@@ -128,7 +128,7 @@ describe('NavigationSliceZone', () => {
           }
           store = {
             state: {
-              mainNavigation: [expectedSiteNavigation],
+              mainNavigations: [expectedSiteNavigation],
             },
           }
         })
@@ -160,7 +160,7 @@ describe('NavigationSliceZone', () => {
 
           store = {
             state: {
-              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+              mainNavigations: [expectedSiteNavigation, expectedProNavigation],
             },
           }
         })
@@ -190,7 +190,7 @@ describe('NavigationSliceZone', () => {
 
           store = {
             state: {
-              mainNavigation: [expectedSiteNavigation],
+              mainNavigations: [expectedSiteNavigation],
             },
           }
         })