Fix organisation-nav display after rebase

1024pix · Sep 25, 2020 · f83eb13 · f83eb13
1 parent 524d96a
commit f83eb13
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 143 deletions.
diff --git a/assets/scss/components/_app-navbar.scss b/assets/scss/components/_app-navbar.scss
diff --git 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
@@ -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,33 +71,34 @@ 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') {
     .burger-menu {
       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
@@ -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
@@ -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')
   },