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,172 +5,286 @@ $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 {
-    z-index: 2;
+    > header {
-    position: relative;
+      z-index: 2;
-    > div {
+      position: relative;
-      padding: $body-margin-y $body-margin-x 0 $body-margin-x;
+      > div {
-      display: grid;
+        padding: $body-margin-y $body-margin-x 0 $body-margin-x;
-      grid-template-columns: repeat(16, 1fr);
+        display: grid;
-      > #block-caravane-logorepublique {
+        grid-template-columns: repeat(16, 1fr);
-        grid-column: 1 / span 1;
+        > #block-caravane-logorepublique {
-        display: flex;
+          grid-column: 1 / span 1;
-        align-items: center;
-        > div > div > a > img {
-          width: 100%;
-          height: auto;
-        }
-      }
-      > #block-caravane-logoepau {
-        grid-column: 2 / span 2;
-        display: flex;
-        align-items: center;
-        > div > div > a > img {
-          width: 100%;
-          height: auto;
-        }
-      }
-      > #block-caravane-logocaravane {
-        grid-column: 7 / span 4;
-        display: flex;
-        align-items: center;
-        > div > div > a > img {
-          width: 100%;
-          height: auto;
-        }
-      }
-      > #block-caravane-mainnavigation {
-        display: flex;
-        justify-content: flex-end;
-        grid-column: 16 / span 1;
-        width: 100%;
-        > div {
-          width: 40%;
           display: flex;
           align-items: center;
-          justify-content: center;
+          > div > div > a > img {
-          flex-direction: column;
-          cursor: pointer;
-          > h2 {
-            margin-block: 0;
-            font-size: $sm-font-size;
-            color: $main-color-light;
-            font-weight: normal;
-            margin-bottom: 5px;
-          }
-          > #hamburger {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
             width: 100%;
-            > div {
+            height: auto;
-              width: 100%;
-              height: 3px;
-              margin: 4px 0;
-              border-radius: 2px;
-              background-color: $main-color-light;
-            }
-          }
-          > ul {
-            display: none;
           }
         }
-      }
+        > #block-caravane-logoepau {
-    }
+          grid-column: 2 / span 2;
-  }
+          display: flex;
-  .layout-container > main {
-    z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    > .layout-content {
-      z-index: 1;
-      position: fixed;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      > div {
-        height: 100%;
-        > .layout {
-          display: grid;
-          grid-template-columns: repeat(16,1fr);
           align-items: center;
-          height: 100%;
+          > div > div > a > img {
-          > .layout__region--first {
+            width: 100%;
-            padding-left: $body-margin-x;
+            height: auto;
-            grid-column: 1 / span 4;
+          }
-            position: relative;
+        }
+        > #block-caravane-logocaravane {
+          grid-column: 7 / span 4;
+          display: flex;
+          align-items: center;
+          > div > div > a > img {
+            width: 100%;
+            height: auto;
+          }
+        }
+        > #block-caravane-mainnavigation {
+          display: flex;
+          justify-content: flex-end;
+          grid-column: 16 / span 1;
+          width: 10vw;
+          margin-top: 1.8vh;
+          position: fixed;
+          right: $body-margin-x;
+          > #menu-title {
+            display: flex;
             z-index: 2;
-            pointer-events: none;
+            background-color: $brand-color;
-            width: fit-content;
+            position: fixed;
-            > div {
+            width: $menu-width;
-              pointer-events: auto;
+            right: 0;
-            }
-          } 
-          > .layout__region--second {
-            position: absolute;
-            z-index: 1;
             top: 0;
-            width: 100vw;
+            padding-top: 2.8vh;
-            .leaflet-container {
+            margin-right: $body-margin-x;
-              // add map style here
+            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;
             }
-          } 
+          }
-          > .layout__region--third {
+          > #menu-title.open {
-            padding-right: $body-margin-x;
+            opacity: 1;
-            height: 100%;
+            max-height: 5vh;
-            grid-column: 13 / span 4;
+          }
-            position: relative;
+          > #menu {
-            z-index: 2;
-            background: linear-gradient(to right, transparent, #faf1eb);
             display: flex;
             align-items: center;
-            justify-content: flex-end;
+            justify-content: center;
-            pointer-events: none;
+            flex-direction: column;
-            > div {
+            cursor: pointer;
-              pointer-events: auto;
+            > h2 {
-              ul {
+              z-index: 2;
-                list-style: none;
+              margin-block: 0;
-                > li > div {
+              font-size: $sm-font-size;
-                  display: flex;
+              color: $main-color-light;
-                  justify-content: flex-end;
+              font-weight: normal;
-                  a {
+              margin-bottom: 5px;
-                    text-decoration: none;
+            }
-                    color: $main-color;
+            > h2 {
-                    font-family: 'Joost', sans-serif;
+              display: none;
-                    font-weight: bold;
+            }
-                    font-size: $m-font-size;
+            > #hamburger {
-                    display: inline-block;
+              position: fixed;
-                    margin: 15px 0;
+              height: 5vh;
-                    text-align: right;
+              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: 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 {
+              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;
+            }
+          }
         }
       }
     }
-    > #etape-modale > div {
+    > main {
-      z-index: 2;
+      z-index: 1;
-      position: relative;
+      position: absolute;
-      top: 15vh;
+      top: 0;
-      left: 25vw;
+      left: 0;
-      width: 50vw;
+      width: 100%;
-      background-color: rgba(255,255,255,0.5);
+      height: 100vh;
+      > .layout-content {
+        z-index: 1;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        > div {
+          height: 100%;
+          > .layout {
+            display: grid;
+            grid-template-columns: repeat(16,1fr);
+            align-items: center;
+            height: 100%;
+            > .layout__region--first {
+              padding-left: $body-margin-x;
+              grid-column: 1 / span 4;
+              position: relative;
+              z-index: 2;
+              pointer-events: none;
+              width: fit-content;
+              > div {
+                pointer-events: auto;
+              }
+            } 
+            > .layout__region--second {
+              position: absolute;
+              z-index: 1;
+              top: 0;
+              width: 100vw;
+              .leaflet-container {
+                // add map style here
+              }
+            } 
+            > .layout__region--third {
+              padding-right: $body-margin-x;
+              height: 100%;
+              grid-column: 13 / span 4;
+              position: relative;
+              z-index: 2;
+              background: linear-gradient(to right, transparent, #faf1eb);
+              display: flex;
+              align-items: center;
+              justify-content: flex-end;
+              pointer-events: none;
+              > div {
+                pointer-events: auto;
+                ul {
+                  list-style: none;
+                  > li > div {
+                    display: flex;
+                    justify-content: flex-end;
+                    a {
+                      text-decoration: none;
+                      color: $main-color;
+                      font-family: 'Joost', sans-serif;
+                      font-weight: bold;
+                      font-size: $m-font-size;
+                      display: inline-block;
+                      margin: 15px 0;
+                      text-align: right;
+                    }
+                  }
+                }
+              }
+            } 
+          }
+        }
+      }
+      > #etape-modale > div {
+        z-index: 2;
+        position: relative;
+        top: 15vh;
+        left: 25vw;
+        width: 50vw;
+        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') %}