toggle menu nav principale

web/themes/custom/caravane/assets/js/main.js

@@ -39,12 +39,11 @@ import { useEtapeStore } from './stores/etape';
     function init () {
       console.log('CaravaneTheme init()')
       initVues()
+      toggleMenu()
     }
 
     function initVues(){
       initVueEtapeModale();
-
-
     }
 
     function initVueEtapeModale(){
@@ -90,6 +89,22 @@ import { useEtapeStore } from './stores/etape';
         }
         
         
+        
+      })
+    }
+
+    function toggleMenu() {
+      const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
+      const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
+      const menuTitle = document.querySelector('#menu-title');
+      const menuBurger = document.querySelector('#hamburger');
+      const menuH2 = document.querySelector('#menu > h2');
+      menuButton.addEventListener('click', (e) => {
+        // e.preventDefault();
+        menuContainer.classList.toggle('open');
+        menuTitle.classList.toggle('open');
+        menuBurger.classList.toggle('open');
+        menuH2.classList.toggle('open');
       })
     }
     

web/themes/custom/caravane/assets/scss/main.scss

@@ -5,17 +5,23 @@ $body-margin-y: 5px;
 
 $sm-font-size: 0.8rem;
 $m-font-size: 1.4rem;
+$l-font-size: 1.8rem;
 
 $main-color: #1a1918;
 $main-color-light: #635b58;
 $light-color: #faf1eb;
+$brand-color: #80c8bf;
+
+$menu-width: 15vw;
+$menu-margin: 2rem;
 
 body{
   font-family: 'Marianne', sans-serif;
   color: $main-color;
   margin: 0;
   padding: 0;
-  .layout-container > header {
+  .layout-container {
+    > header {
       z-index: 2;
       position: relative;
       > div {
@@ -53,43 +59,150 @@ body{
           display: flex;
           justify-content: flex-end;
           grid-column: 16 / span 1;
-        width: 100%;
+          width: 10vw;
-        > div {
+          margin-top: 1.8vh;
-          width: 40%;
+          position: fixed;
+          right: $body-margin-x;
+          > #menu-title {
+            display: flex;
+            z-index: 2;
+            background-color: $brand-color;
+            position: fixed;
+            width: $menu-width;
+            right: 0;
+            top: 0;
+            padding-top: 2.8vh;
+            margin-right: $body-margin-x;
+            padding-bottom: 10px;
+            max-height: 0vh;
+            overflow: hidden;
+            height: 5vh;
+            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
+            opacity: 0;
+            align-items: center;
+            > p {
+              padding-left: $menu-margin;
+              margin: 10px 0;
+              color: white;
+              font-size: $l-font-size;
+              font-family: 'Joost', sans-serif;
+              font-weight: bold;
+            }
+          }
+          > #menu-title.open {
+            opacity: 1;
+            max-height: 5vh;
+          }
+          > #menu {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-direction: column;
             cursor: pointer;
             > h2 {
+              z-index: 2;
               margin-block: 0;
               font-size: $sm-font-size;
               color: $main-color-light;
               font-weight: normal;
               margin-bottom: 5px;
             }
+            > h2 {
+              display: none;
+            }
             > #hamburger {
+              position: fixed;
+              height: 5vh;
+              right: 0;
+              top: 0;
+              margin-right: $body-margin-x;
+              padding-top: 2.8vh;
+              padding-bottom: 10px;
+              z-index: 2;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-            width: 100%;
+              width: 2.4rem;
+              transition: transform 0.3s ease-out;
               > div {
                 width: 100%;
                 height: 3px;
                 margin: 4px 0;
                 border-radius: 2px;
                 background-color: $main-color-light;
+                opacity: 1;
+                transition: transform 0.5s, opacity 0.2s;
               }
             }
+            > #hamburger:hover {
+              transform: scale(1.1);
+            }
+            > #hamburger.open {
+              transform: scale(0.7);
+              > div {
+                background-color: white;
+              }
+              > div:first-of-type {
+                transform: rotate(45deg);
+                margin-top: 50%;
+              }
+              > div:last-of-type {
+                transform: rotate(-45deg);
+                margin-top: -50%;
+              }
+              > div:nth-child(2) {
+                opacity: 0;
+              }
+            }
+            > #hamburger.open:hover {
+              transform: scale(0.8);
+            }
             > ul {
-            display: none;
+              list-style-type: none;
+              background-color: white;
+              position: fixed;
+              width: $menu-width;
+              right: $body-margin-x;
+              padding: 0;
+              padding-top: 0vh;
+              opacity: 0;
+              transition: padding-top 0.3s ease-out, opacity 0.2s ease-out;
+              z-index: 1;
+              > li {
+                padding-left: $menu-margin;
+                margin: 15px 0;
+                > a {
+                  color: $main-color;
+                  text-decoration: none;
+                }
+                > a.is-active::before,
+                > a:hover::before {
+                  content: '→';
+                  color: $brand-color;
+                  width: 2rem;
+                  display: inline-block;
+                  opacity: 1;
+                }
+                > a::before {
+                  content: '→';
+                  color: $brand-color;
+                  opacity: 0;
+                  display: inline-block;
+                  width: 0rem;
+                  transition: width 0.2s ease-out, opacity 0.2s ease-out;
+                }
+              }
+            }
+            > ul.open {
+              opacity: 1;
+              padding-top: 22vh;
             }
           }
         }
       }
     }
-  .layout-container > main {
+    > main {
       z-index: 1;
       position: absolute;
       top: 0;
@@ -173,4 +286,5 @@ body{
         background-color: rgba(255,255,255,0.5);
       }
     }
+  } 
 }

web/themes/custom/caravane/templates/block--caravane-mainnavigation.html.twig

@@ -36,7 +36,8 @@
 #}
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
-  <div>
+  <div id="menu-title"><p>Menu</p></div>
+  <div id="menu">
     {# Label. If not displayed, we still provide it for screen readers. #}
     {% if not configuration.label_display %}
       {% set title_attributes = title_attributes.addClass('visually-hidden') %}