[FEATURE] Redesign du menu burger (PIX-2257).

components/BurgerMenuNav.vue

@@ -1,88 +1,47 @@
 <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="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: {
-      type: Array,
+      type: Object,
       default: null,
     },
   },
 }
 </script>
 
 <style lang="scss">
-.navigation-slice-zone {
+.burger-menu {
   .bm-menu {
-    background: $blue-gradient;
+    background: $white;
 
     @include device-is('large-screen') {
       display: none;
     }
+  }
 
-    ul {
-      padding-left: 0;
-      list-style: none;
-
-      & > li {
-        padding-left: 0;
-
-        &::before {
-          display: none;
-        }
-      }
-    }
-
-    .nav-top {
-      &__link {
-        font-weight: 600;
-        color: $white;
-        text-align: left;
-        margin-bottom: 12px;
-
-        a {
-          text-decoration: none;
-          display: block;
-          transition: 0.3s;
-          font-size: 1rem;
-          line-height: 1.5rem;
-          color: $white;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-    }
+  .bm-item-list {
+    height: 100%;
 
-    .bm-item-list {
+    & > * {
+      padding: 0;
+      flex-direction: column;
       height: 100%;
-      padding: 0 25px;
-
-      & > * {
-        padding: 0;
-        flex-direction: column;
-        height: 100%;
-      }
     }
   }
 

components/BurgerMenuNavItems.vue

@@ -0,0 +1,107 @@
+<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--regular-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: 8px 0 0 0;
+  }
+
+  &__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;
+      }
+    }
+
+    &--regular-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);
+        }
+      }
+    }
+  }
+}
+</style>

components/NavigationSliceZone.vue

@@ -1,37 +1,33 @@
 <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>
-    <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>
-          <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 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>
+      <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>
@@ -73,7 +69,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,
+      }
     },
   },
 }
@@ -87,17 +86,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') {

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.008rem;
+    line-height: 1.375rem;
 
-      &: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;
       }