From f83eb13407fd7cde6fd52d242902f0b2959f94ca Mon Sep 17 00:00:00 2001
From: celineung <celine.ung@zenika.com>
Date: Tue, 22 Sep 2020 19:37:04 +0200
Subject: [PATCH] Fix organisation-nav display after rebase

---
 assets/scss/components/_app-navbar.scss | 94 -------------------------
 assets/scss/components/_index.scss      |  1 -
 components/NavigationSliceZone.vue      | 68 ++++++++++--------
 components/OrganizationNav.vue          | 77 ++++++++++++++++----
 store/index.js                          | 10 +--
 5 files changed, 107 insertions(+), 143 deletions(-)
 delete mode 100755 assets/scss/components/_app-navbar.scss

diff --git a/assets/scss/components/_app-navbar.scss b/assets/scss/components/_app-navbar.scss
deleted file mode 100755
index b56143d65..000000000
--- a/assets/scss/components/_app-navbar.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-.nav {
-  .nav-switch {
-    display: none;
-    height: 30px;
-    background-color: $grey-3;
-
-    @include device-is('desktop') {
-      display: flex;
-    }
-
-    .container {
-      height: 30px;
-      display: flex;
-      align-items: center;
-      flex-flow: row;
-      justify-content: flex-end;
-      width: 1340px;
-
-      span,
-      a {
-        font-size: 12px;
-      }
-
-      a {
-        margin-left: 3px;
-        color: $grey-1;
-        margin-right: 18px;
-
-        &:hover {
-          color: $blue-1;
-        }
-      }
-
-      div {
-        &:last-child {
-          a {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .switch {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .logo {
-    height: 62px;
-    margin-right: 24px;
-  }
-
-  .nav-principal {
-    background-color: $white;
-
-    a:hover {
-      color: $blue-1;
-    }
-
-    .container {
-      height: 90px;
-      display: flex;
-      align-items: center;
-    }
-
-    .logo {
-      height: 62px;
-      margin-right: 24px;
-    }
-
-    .navigation {
-      display: flex;
-      flex-flow: row;
-      justify-content: flex-end;
-      width: 100%;
-      align-items: center;
-
-      .text-black {
-        margin-right: 24px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-
-    .desktop {
-      width: 100%;
-    }
-  }
-}
diff --git a/assets/scss/components/_index.scss b/assets/scss/components/_index.scss
index 8bc3c55ca..9ce4b82ca 100755
--- a/assets/scss/components/_index.scss
+++ b/assets/scss/components/_index.scss
@@ -1,3 +1,2 @@
 @import "./app-header";
-@import "./app-navbar";
 @import "./main-nav";
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 7f62dc9a7..10ca919ad 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -5,29 +5,34 @@
         <burger-menu-nav :items="burgerMenuLinks" />
       </push-menu>
     </client-only>
-    <div id="page-wrap" class="navigation-slice-zone__wrapper">
-      <div class="navigation-slice-zone-wrapper__left-side">
-        <section
-          v-for="(slice, index) in mainNavigation.data.body"
-          :key="`navigation-slice-left-${index}`"
-        >
-          <template v-if="slice.slice_type === 'logos_zone'">
-            <logos-zone :slice="slice" />
-          </template>
-          <template v-if="slice.slice_type === 'navigation_zone'">
-            <navigation-zone :slice="slice" />
-          </template>
-        </section>
+    <div id="page-wrap">
+      <organization-nav :organization-nav-items="organizationNavItems" />
+      <div class="navigation-slice-zone__wrapper">
+        <div class="navigation-slice-zone__content">
+          <div class="navigation-slice-zone-content__left-side">
+            <section
+              v-for="(slice, index) in mainNavigation.data.body"
+              :key="`navigation-slice-left-${index}`"
+            >
+              <template v-if="slice.slice_type === 'logos_zone'">
+                <logos-zone :slice="slice" />
+              </template>
+              <template v-if="slice.slice_type === 'navigation_zone'">
+                <navigation-zone :slice="slice" />
+              </template>
+            </section>
+          </div>
+          <section
+            v-for="(slice, index) in mainNavigation.data.body"
+            :key="`navigation-slice-right-${index}`"
+            class="navigation-slice-zone-wrapper__right-side"
+          >
+            <template v-if="slice.slice_type === 'actions_zone'">
+              <actions-zone :slice="slice" />
+            </template>
+          </section>
+        </div>
       </div>
-      <section
-        v-for="(slice, index) in mainNavigation.data.body"
-        :key="`navigation-slice-right-${index}`"
-        class="navigation-slice-zone-wrapper__right-side"
-      >
-        <template v-if="slice.slice_type === 'actions_zone'">
-          <actions-zone :slice="slice" />
-        </template>
-      </section>
     </div>
   </div>
 </template>
@@ -38,6 +43,7 @@ import LogosZone from '@/components/slices/LogosZone'
 import NavigationZone from '@/components/slices/NavigationZone'
 import ActionsZone from '@/components/slices/ActionsZone'
 import BurgerMenuNav from '@/components/BurgerMenuNav'
+import OrganizationNav from '~/components/OrganizationNav'
 
 export default {
   name: 'NavigationSliceZone',
@@ -46,9 +52,10 @@ export default {
     LogosZone,
     NavigationZone,
     BurgerMenuNav,
+    OrganizationNav,
   },
   computed: {
-    ...mapState(['mainNavigation']),
+    ...mapState(['mainNavigation', 'organizationNavItems']),
     burgerMenuLinks() {
       const navigationZone = this.mainNavigation.data.body.find(
         (slice) => slice.slice_type === 'navigation_zone'
@@ -64,21 +71,22 @@ export default {
 
 <style lang="scss">
 .navigation-slice-zone {
-  display: grid;
-  grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
-  grid-template-areas: '. navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation .';
   box-shadow: -1px 9px 29px -16px rgba(199, 191, 199, 0.9);
-  grid-gap: 24px;
 
   .burger-menu {
     display: block;
   }
 
   .navigation-slice-zone__wrapper {
+    display: grid;
+    grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
+  }
+
+  .navigation-slice-zone__content {
     display: flex;
     justify-content: flex-end;
     height: 80px;
-    grid-area: navigation;
+    grid-column: 2 / span 12;
   }
 
   @include device-is('large-screen') {
@@ -86,11 +94,11 @@ export default {
       display: none;
     }
 
-    .navigation-slice-zone__wrapper {
+    .navigation-slice-zone__content {
       justify-content: space-between;
     }
 
-    .navigation-slice-zone-wrapper {
+    .navigation-slice-zone-content {
       &__left-side {
         display: flex;
       }
diff --git a/components/OrganizationNav.vue b/components/OrganizationNav.vue
index 591130d61..26deecc1c 100644
--- a/components/OrganizationNav.vue
+++ b/components/OrganizationNav.vue
@@ -1,15 +1,17 @@
 <template>
-  <div v-if="showLanguageDropdown || frenchDomain" class="nav-switch">
-    <language-dropdown />
-    <div v-if="frenchDomain" class="container padding-container">
-      <div
-        v-for="item in organizationNavItems"
-        :key="item.id"
-        class="text text-xs text-left text-up regular text-black"
-      >
-        <pix-link :field="item.primary.link">
-          {{ $prismic.asText(item.primary.title) }}
-        </pix-link>
+  <div v-if="showLanguageDropdown || isPixPro" class="organization-nav">
+    <div class="nav-switch">
+      <language-dropdown />
+      <div v-if="isPixPro" class="nav-switch__container">
+        <div
+          v-for="item in organizationNavItems"
+          :key="item.id"
+          class="text text-xs text-left text-up regular text-black"
+        >
+          <pix-link :field="item.primary.link">
+            {{ $prismic.asText(item.primary.title) }}
+          </pix-link>
+        </div>
       </div>
     </div>
   </div>
@@ -33,11 +35,58 @@ export default {
       return this.$config.languageSwitchEnabled
     },
 
-    frenchDomain() {
-      return !(this.$store.state.host === this.$config.orgDomain)
+    isPixPro() {
+      return !process.env.isPixSite
     },
   },
 }
 </script>
 
-<style></style>
+<style scoped lang="scss">
+.organization-nav {
+  display: grid;
+  grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
+  background-color: $grey-3;
+}
+
+.nav-switch {
+  display: none;
+  height: 30px;
+
+  @include device-is('large-screen') {
+    display: flex;
+    grid-column: 2 / span 12;
+  }
+
+  &__container {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    span,
+    a {
+      font-size: 12px;
+    }
+
+    a {
+      margin-left: 3px;
+      color: $grey-1;
+      margin-right: 18px;
+
+      &:hover {
+        color: $blue-1;
+      }
+    }
+
+    div {
+      &:last-child {
+        a {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/store/index.js b/store/index.js
index 180177e1b..4bb6cdd56 100644
--- a/store/index.js
+++ b/store/index.js
@@ -41,10 +41,12 @@ export const mutations = {
       return response.data.body.filter((body) => body.primary.type === type)
     }
 
-    state.organizationNavItems = navItems(
-      navigations,
-      'pix-pro-organizations-nav'
-    )
+    if (!process.env.isPixSite) {
+      state.organizationNavItems = navItems(
+        navigations,
+        'pix-pro-organizations-nav'
+      )
+    }
     state.resourcesNavItems = navItems(navigations, 'ressources-nav')
     state.aboutNavItems = navItems(navigations, 'about-nav')
   },