From e26140a63bf0eeb6fedf406690bc217906c51f94 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Fri, 26 Feb 2021 16:59:44 +0100
Subject: [PATCH 1/7] Add connexion button to nav on mobile and desktop

---
 components/NavigationSliceZone.vue | 46 ++++++++++++------------------
 components/slices/ActionsZone.vue  | 43 ++++++++++++++--------------
 2 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 78313c128..33318099c 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -6,31 +6,29 @@
       </slide-menu>
     </client-only>
     <div id="page-wrap">
-      <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 usedMainNavigation.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>
+      <div class="navigation-slice-zone__content">
+        <div class="navigation-slice-zone-content__left-side">
           <section
             v-for="(slice, index) in usedMainNavigation.data.body"
-            :key="`navigation-slice-right-${index}`"
-            class="navigation-slice-zone-wrapper__right-side"
+            :key="`navigation-slice-left-${index}`"
           >
-            <template v-if="slice.slice_type === 'actions_zone'">
-              <actions-zone :slice="slice" />
+            <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 usedMainNavigation.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>
   </div>
@@ -87,17 +85,11 @@ export default {
     display: block;
   }
 
-  .navigation-slice-zone__wrapper {
-    display: grid;
-    grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
-    grid-template-rows: auto;
-  }
-
   .navigation-slice-zone__content {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    margin-left: 100px;
     height: 80px;
-    grid-column: 2 / span 12;
   }
 
   @include device-is('large-screen') {
diff --git a/components/slices/ActionsZone.vue b/components/slices/ActionsZone.vue
index 57e3bc8db..57e43a815 100644
--- a/components/slices/ActionsZone.vue
+++ b/components/slices/ActionsZone.vue
@@ -36,35 +36,36 @@ export default {
 
 <style scoped lang="scss">
 .actions-zone {
-  display: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
   margin-left: 22px;
 
-  @include device-is('large-screen') {
-    display: flex;
-    align-items: center;
-    height: 100%;
+  & > div {
+    margin-right: 16px;
+  }
 
-    & > div {
-      margin-right: 16px;
+  &__item {
+    font-size: 0.875rem;
+    color: $grey-50;
+    font-family: $font-roboto;
+    font-weight: $font-medium;
+    letter-spacing: 0.13px;
+    line-height: 22px;
 
-      &:last-of-type {
-        margin-right: 0;
-      }
+    &.link:hover {
+      color: $blue;
     }
 
-    &__item {
-      font-size: 0.875rem;
-      color: $grey-50;
-      font-family: $font-roboto;
-      font-weight: $font-medium;
-      letter-spacing: 0.13px;
-      line-height: 22px;
-
-      &.link:hover {
-        color: $blue;
-      }
+    &.button {
+      display: none;
+    }
+  }
 
+  @include device-is('large-screen') {
+    &__item {
       &.button {
+        display: flex;
         color: $white;
         height: 36px;
       }

From a4793b5ea19778e13274e2e186f9537a7d06f877 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Mon, 1 Mar 2021 10:50:29 +0100
Subject: [PATCH 2/7] Redesign burger menu

---
 components/BurgerMenuNav.vue       | 52 ++++++++++++++++++++++--------
 components/NavigationSliceZone.vue |  2 +-
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index babb049d4..cb4b4cae3 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -1,14 +1,18 @@
 <template>
-  <div>
-    <div class="nav-top">
-      <ul>
-        <li v-for="item in items" :key="item.id" class="nav-top__link">
-          <pix-link :field="item.link">
-            {{ $prismic.asText(item.name) }}
-          </pix-link>
-        </li>
-      </ul>
-    </div>
+  <div class="nav-top">
+    <ul>
+      <li
+        v-for="item in items"
+        :key="item.id"
+        :class="
+          item.style === 'button' ? 'nav-top__link--login' : 'nav-top__link'
+        "
+      >
+        <pix-link :field="item.link">
+          {{ $prismic.asText(item.name) }}
+        </pix-link>
+      </li>
+    </ul>
     <language-switcher type="only-text" />
   </div>
 </template>
@@ -33,7 +37,7 @@ export default {
 <style lang="scss">
 .navigation-slice-zone {
   .bm-menu {
-    background: $blue-gradient;
+    background: $white;
 
     @include device-is('large-screen') {
       display: none;
@@ -57,7 +61,7 @@ export default {
         font-weight: 600;
         color: $white;
         text-align: left;
-        margin-bottom: 12px;
+        margin-bottom: 24px;
 
         a {
           text-decoration: none;
@@ -65,18 +69,38 @@ export default {
           transition: 0.3s;
           font-size: 1rem;
           line-height: 1.5rem;
-          color: $white;
+          color: $grey-60;
 
           &:hover {
             text-decoration: underline;
           }
         }
+
+        a[href*='app.pix'] {
+          color: blue;
+        }
+
+        &--login {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          max-width: 225px;
+          height: 44px;
+          background-color: $blue;
+          border-radius: 4px;
+
+          a {
+            color: $white;
+            font-size: 0.875rem;
+            font-weight: 600;
+          }
+        }
       }
     }
 
     .bm-item-list {
       height: 100%;
-      padding: 0 25px;
+      //padding: 0 25px;
 
       & > * {
         padding: 0;
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 33318099c..456a1c1fa 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="navigation-slice-zone">
     <client-only>
-      <slide-menu width="230" class="burger-menu">
+      <slide-menu width="320" class="burger-menu">
         <burger-menu-nav :items="burgerMenuLinks" />
       </slide-menu>
     </client-only>

From 43787de96098fbeea2c93822dda86c2926dea476 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Tue, 2 Mar 2021 09:47:55 +0100
Subject: [PATCH 3/7] Refactor props for burger menu

---
 components/BurgerMenuNav.vue       | 56 ++++++++++++++++++++++++------
 components/NavigationSliceZone.vue |  5 ++-
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index cb4b4cae3..f078be14b 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -2,11 +2,21 @@
   <div class="nav-top">
     <ul>
       <li
-        v-for="item in items"
+        v-for="item in items.navigationZone"
         :key="item.id"
-        :class="
-          item.style === 'button' ? 'nav-top__link--login' : 'nav-top__link'
-        "
+        class="nav-top__link"
+      >
+        <pix-link :field="item.link">
+          {{ $prismic.asText(item.name) }}
+        </pix-link>
+      </li>
+    </ul>
+    <ul>
+      <li
+        v-for="item in items.actionsZone"
+        :key="item.id"
+        class="nav-top__link"
+        :class="item === signUpButton ? 'button' : 'login'"
       >
         <pix-link :field="item.link">
           {{ $prismic.asText(item.name) }}
@@ -27,10 +37,15 @@ export default {
   },
   props: {
     items: {
-      type: Array,
+      type: Object,
       default: null,
     },
   },
+  computed: {
+    signUpButton() {
+      return this.items.actionsZone[this.items.actionsZone.length - 1]
+    },
+  },
 }
 </script>
 
@@ -44,9 +59,14 @@ export default {
     }
 
     ul {
-      padding-left: 0;
+      margin: 24px 0 0 0;
+      padding: 0;
       list-style: none;
 
+      &:last-child {
+        margin: 0;
+      }
+
       & > li {
         padding-left: 0;
 
@@ -76,10 +96,6 @@ export default {
           }
         }
 
-        a[href*='app.pix'] {
-          color: blue;
-        }
-
         &--login {
           display: flex;
           align-items: center;
@@ -98,9 +114,27 @@ export default {
       }
     }
 
+    .button {
+      width: 225px;
+      margin-left: 0;
+
+      a {
+        color: $white;
+      }
+    }
+
+    a[href*='pro.pix'] {
+      width: 256px;
+      padding-top: 12px;
+      border-top: 1px solid $grey-70;
+    }
+
+    .login > a {
+      color: blue;
+    }
+
     .bm-item-list {
       height: 100%;
-      //padding: 0 25px;
 
       & > * {
         padding: 0;
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 456a1c1fa..296e7f094 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -71,7 +71,10 @@ export default {
       const actionsZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'actions_zone'
       )
-      return [...navigationZone.items, ...actionsZone.items]
+      return {
+        navigationZone: navigationZone.items,
+        actionsZone: actionsZone.items,
+      }
     },
   },
 }

From 9a73c606b2ee7c4346160ab3fb54c87221274356 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Tue, 2 Mar 2021 14:04:08 +0100
Subject: [PATCH 4/7] Refactor CSS for burger menu

---
 components/BurgerMenuNav.vue | 66 ++++++++++++++----------------------
 1 file changed, 25 insertions(+), 41 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index f078be14b..cf1c409fa 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="nav-top">
+  <div class="burger-navigation">
     <ul>
       <li
         v-for="item in items.navigationZone"
         :key="item.id"
-        class="nav-top__link"
+        class="burger-navigation__link"
       >
         <pix-link :field="item.link">
           {{ $prismic.asText(item.name) }}
@@ -15,7 +15,7 @@
       <li
         v-for="item in items.actionsZone"
         :key="item.id"
-        class="nav-top__link"
+        class="burger-navigation__link"
         :class="item === signUpButton ? 'button' : 'login'"
       >
         <pix-link :field="item.link">
@@ -76,7 +76,7 @@ export default {
       }
     }
 
-    .nav-top {
+    .burger-navigation {
       &__link {
         font-weight: 600;
         color: $white;
@@ -91,56 +91,40 @@ export default {
           line-height: 1.5rem;
           color: $grey-60;
 
+          &[href*='pro.pix'] {
+            width: 256px;
+            padding-top: 12px;
+            border-top: 1px solid $grey-70;
+          }
+
           &:hover {
             text-decoration: underline;
           }
         }
+      }
 
-        &--login {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          max-width: 225px;
-          height: 44px;
-          background-color: $blue;
-          border-radius: 4px;
-
-          a {
-            color: $white;
-            font-size: 0.875rem;
-            font-weight: 600;
-          }
-        }
+      .login > a {
+        color: blue;
       }
-    }
 
-    .button {
-      width: 225px;
-      margin-left: 0;
+      .button {
+        width: 225px;
+        margin-left: 0;
 
-      a {
-        color: $white;
+        a {
+          color: $white;
+        }
       }
     }
+  }
 
-    a[href*='pro.pix'] {
-      width: 256px;
-      padding-top: 12px;
-      border-top: 1px solid $grey-70;
-    }
-
-    .login > a {
-      color: blue;
-    }
+  .bm-item-list {
+    height: 100%;
 
-    .bm-item-list {
+    & > * {
+      padding: 0;
+      flex-direction: column;
       height: 100%;
-
-      & > * {
-        padding: 0;
-        flex-direction: column;
-        height: 100%;
-      }
     }
   }
 

From 486ce4a418c4252d88923a1303883adfefa53b2f Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Tue, 2 Mar 2021 15:58:35 +0100
Subject: [PATCH 5/7] Refactor burger items lists to new component

---
 components/BurgerMenuNav.vue      |  93 ++----------------------
 components/BurgerMenuNavItems.vue | 115 ++++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 88 deletions(-)
 create mode 100644 components/BurgerMenuNavItems.vue

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index cf1c409fa..59a1dc6f8 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -1,39 +1,20 @@
 <template>
-  <div class="burger-navigation">
-    <ul>
-      <li
-        v-for="item in items.navigationZone"
-        :key="item.id"
-        class="burger-navigation__link"
-      >
-        <pix-link :field="item.link">
-          {{ $prismic.asText(item.name) }}
-        </pix-link>
-      </li>
-    </ul>
-    <ul>
-      <li
-        v-for="item in items.actionsZone"
-        :key="item.id"
-        class="burger-navigation__link"
-        :class="item === signUpButton ? 'button' : 'login'"
-      >
-        <pix-link :field="item.link">
-          {{ $prismic.asText(item.name) }}
-        </pix-link>
-      </li>
-    </ul>
+  <div class="burger-menu-nav">
+    <burger-menu-nav-items :items="items.navigationZone" />
+    <burger-menu-nav-items :items="items.actionsZone" :is-action="true" />
     <language-switcher type="only-text" />
   </div>
 </template>
 
 <script>
 import LanguageSwitcher from '@/components/LanguageSwitcher'
+import BurgerMenuNavItems from '@/components/BurgerMenuNavItems'
 
 export default {
   name: 'BurgerMenuNav',
   components: {
     LanguageSwitcher,
+    BurgerMenuNavItems,
   },
   props: {
     items: {
@@ -41,11 +22,6 @@ export default {
       default: null,
     },
   },
-  computed: {
-    signUpButton() {
-      return this.items.actionsZone[this.items.actionsZone.length - 1]
-    },
-  },
 }
 </script>
 
@@ -57,65 +33,6 @@ export default {
     @include device-is('large-screen') {
       display: none;
     }
-
-    ul {
-      margin: 24px 0 0 0;
-      padding: 0;
-      list-style: none;
-
-      &:last-child {
-        margin: 0;
-      }
-
-      & > li {
-        padding-left: 0;
-
-        &::before {
-          display: none;
-        }
-      }
-    }
-
-    .burger-navigation {
-      &__link {
-        font-weight: 600;
-        color: $white;
-        text-align: left;
-        margin-bottom: 24px;
-
-        a {
-          text-decoration: none;
-          display: block;
-          transition: 0.3s;
-          font-size: 1rem;
-          line-height: 1.5rem;
-          color: $grey-60;
-
-          &[href*='pro.pix'] {
-            width: 256px;
-            padding-top: 12px;
-            border-top: 1px solid $grey-70;
-          }
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      .login > a {
-        color: blue;
-      }
-
-      .button {
-        width: 225px;
-        margin-left: 0;
-
-        a {
-          color: $white;
-        }
-      }
-    }
   }
 
   .bm-item-list {
diff --git a/components/BurgerMenuNavItems.vue b/components/BurgerMenuNavItems.vue
new file mode 100644
index 000000000..814976ac6
--- /dev/null
+++ b/components/BurgerMenuNavItems.vue
@@ -0,0 +1,115 @@
+<template>
+  <ul class="burger-menu-nav__items">
+    <li
+      v-for="item in items"
+      :key="item.id"
+      class="burger-menu-nav-items__link"
+      :class="
+        isAction
+          ? 'burger-menu-nav-items__link--action'
+          : 'burger-menu-nav-items__link--link'
+      "
+    >
+      <pix-link :field="item.link">
+        {{ $prismic.asText(item.name) }}
+      </pix-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'BurgerMenuNavItems',
+  props: {
+    items: {
+      type: Array,
+      default: null,
+    },
+    isAction: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.burger-menu-nav {
+  &__items {
+    margin: 24px 0 0 0;
+    padding: 0;
+    list-style: none;
+
+    &:last-child {
+      margin-top: 8px;
+    }
+  }
+}
+
+.burger-menu-nav-items {
+  &__link {
+    padding-left: 0;
+    font-weight: 600;
+    color: $white;
+    text-align: left;
+    margin-bottom: 24px;
+
+    &::before {
+      display: none;
+    }
+
+    a {
+      display: block;
+      transition: 0.3s;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      color: $grey-60;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    &--link {
+      &:last-child {
+        & > a {
+          width: 256px;
+          padding-top: 12px;
+          border-top: 1px solid $grey-20;
+        }
+      }
+    }
+
+    &--action {
+      & > a {
+        color: $blue;
+      }
+
+      &:last-child {
+        transition: all 0.5s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 225px;
+        height: 44px;
+        background: $blue;
+        border-radius: 4px;
+        color: $white;
+
+        & > a {
+          color: $white;
+        }
+
+        &:hover {
+          transition: all 0.5s ease;
+          transform: scale(1.03);
+        }
+      }
+    }
+  }
+
+  &:last-child {
+    margin: 0;
+  }
+}
+</style>

From 9fb30b6f1f5a66add7d22303c46e0a8c42c0c7e3 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Thu, 4 Mar 2021 09:42:39 +0100
Subject: [PATCH 6/7] Make BurgerMenuNavItems BEM compliant

---
 components/BurgerMenuNavItems.vue | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/components/BurgerMenuNavItems.vue b/components/BurgerMenuNavItems.vue
index 814976ac6..524b1002b 100644
--- a/components/BurgerMenuNavItems.vue
+++ b/components/BurgerMenuNavItems.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="burger-menu-nav__items">
+  <ul class="burger-menu-nav-items">
     <li
       v-for="item in items"
       :key="item.id"
@@ -7,7 +7,7 @@
       :class="
         isAction
           ? 'burger-menu-nav-items__link--action'
-          : 'burger-menu-nav-items__link--link'
+          : 'burger-menu-nav-items__link--regular-link'
       "
     >
       <pix-link :field="item.link">
@@ -34,19 +34,15 @@ export default {
 </script>
 
 <style lang="scss">
-.burger-menu-nav {
-  &__items {
-    margin: 24px 0 0 0;
-    padding: 0;
-    list-style: none;
+.burger-menu-nav-items {
+  margin: 24px 0 0 0;
+  padding: 0;
+  list-style: none;
 
-    &:last-child {
-      margin-top: 8px;
-    }
+  &:last-child {
+    margin-top: 8px;
   }
-}
 
-.burger-menu-nav-items {
   &__link {
     padding-left: 0;
     font-weight: 600;
@@ -70,7 +66,7 @@ export default {
       }
     }
 
-    &--link {
+    &--regular-link {
       &:last-child {
         & > a {
           width: 256px;

From 3a88c7741dec09909f84ebe56f72544421c50617 Mon Sep 17 00:00:00 2001
From: alexandrecoin <alexandre.pc.coin@gmail.com>
Date: Thu, 4 Mar 2021 12:00:57 +0100
Subject: [PATCH 7/7] Update CSS

---
 components/BurgerMenuNav.vue       |  2 +-
 components/BurgerMenuNavItems.vue  |  6 +----
 components/NavigationSliceZone.vue | 36 ++++++++++++++----------------
 components/slices/ActionsZone.vue  |  4 ++--
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index 59a1dc6f8..9c13e4a49 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <style lang="scss">
-.navigation-slice-zone {
+.burger-menu {
   .bm-menu {
     background: $white;
 
diff --git a/components/BurgerMenuNavItems.vue b/components/BurgerMenuNavItems.vue
index 524b1002b..fd36b8a6b 100644
--- a/components/BurgerMenuNavItems.vue
+++ b/components/BurgerMenuNavItems.vue
@@ -40,7 +40,7 @@ export default {
   list-style: none;
 
   &:last-child {
-    margin-top: 8px;
+    margin: 8px 0 0 0;
   }
 
   &__link {
@@ -103,9 +103,5 @@ export default {
       }
     }
   }
-
-  &:last-child {
-    margin: 0;
-  }
 }
 </style>
diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
index 296e7f094..368c8faa4 100644
--- a/components/NavigationSliceZone.vue
+++ b/components/NavigationSliceZone.vue
@@ -5,31 +5,29 @@
         <burger-menu-nav :items="burgerMenuLinks" />
       </slide-menu>
     </client-only>
-    <div id="page-wrap">
-      <div class="navigation-slice-zone__content">
-        <div class="navigation-slice-zone-content__left-side">
-          <section
-            v-for="(slice, index) in usedMainNavigation.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>
+    <div class="navigation-slice-zone__content">
+      <div class="navigation-slice-zone-content__left-side">
         <section
           v-for="(slice, index) in usedMainNavigation.data.body"
-          :key="`navigation-slice-right-${index}`"
-          class="navigation-slice-zone-wrapper__right-side"
+          :key="`navigation-slice-left-${index}`"
         >
-          <template v-if="slice.slice_type === 'actions_zone'">
-            <actions-zone :slice="slice" />
+          <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 usedMainNavigation.data.body"
+        :key="`navigation-slice-right-${index}`"
+        class="navigation-slice-zone-content__right-side"
+      >
+        <template v-if="slice.slice_type === 'actions_zone'">
+          <actions-zone :slice="slice" />
+        </template>
+      </section>
     </div>
   </div>
 </template>
diff --git a/components/slices/ActionsZone.vue b/components/slices/ActionsZone.vue
index 57e43a815..991af5f91 100644
--- a/components/slices/ActionsZone.vue
+++ b/components/slices/ActionsZone.vue
@@ -50,8 +50,8 @@ export default {
     color: $grey-50;
     font-family: $font-roboto;
     font-weight: $font-medium;
-    letter-spacing: 0.13px;
-    line-height: 22px;
+    letter-spacing: 0.008rem;
+    line-height: 1.375rem;
 
     &.link:hover {
       color: $blue;