architecture de contenu + theming in parrallele

web_main/themes/custom/mathallo/assets/js/main.js

@@ -42,10 +42,20 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
     // |___|_||_|_|\__|
     function init () {
       console.log('MathalloTheme init()')
+      initBurgerMenu();
       initBgAnime()
       initVues()
     }
 
+    function initBurgerMenu() {
+      let header_right = document.getElementById('burger-btn');
+      header_right.parentElement.addEventListener('click', function(e){
+        // console.log('click header_right', this);
+        this.firstElementChild.toggleAttribute('opened');
+        this.firstElementChild.nextElementSibling.toggleAttribute('opened');
+      })
+    }
+
     function initBgAnime(){
       // gsap.to('body', {
       //   scrollTrigger: 'main[role="main"]', // start animation when ".box" enters the viewport

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -13,6 +13,8 @@ body{
   background-position: center;
 }
 
+$header_height: 50px;
+
 div.layout-container{
   // display: flex;
   // flex-direction: column;
@@ -25,6 +27,7 @@ div.layout-container{
     position: fixed;
     top:0;
     width: 100vw;
+    height: $header_height;
   }
   main[role="main"]{
     // flex: 1 1 auto; 
@@ -49,7 +52,7 @@ header[role="banner"]{
   .header-middle{
     display: flex;
     justify-content:space-between;
-    align-items: baseline;
+    align-items: center;
     padding: 0.2em 2em;
   }
   
@@ -72,16 +75,117 @@ header[role="banner"]{
   }
 
   .header-right{
+    // position: relative;
+    height:20px; width:20px;
+    cursor: pointer;
+    // background-color: green;
 
-    #block-mathallo-navigationprincipale{
-      ul{
-        display: flex;
-        list-style: none;
-        li:not(:first-child){
-          margin-left: 1em;
+    >div#burger-btn{
+      position:relative;
+      &, &::before, &::after{
+        // position: absolute;
+        width:20px; height:3px;
+        background-color: $bleu_site;
+      }
+      top: 8.5px;
+      &::before, &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        // background-color: red;
+      }
+      &::before{
+        top:6px;
+      }
+      &::after{
+        bottom: 6px;
+      }
+
+      transition-duration: 0.5s;
+      &[opened]{
+        transform: rotate(90deg);
+      }
+    }
+    
+
+    &>div.wrapper{
+      position:absolute;
+      top:$header_height; left:0;
+      // z-index: 99;
+      background-color: rgba(0,0,0,0.75);
+
+      width:100vw;
+      height: 0;
+      overflow: hidden;
+      &[opened]{
+        height: calc(100vh - $header_height);
+      }
+      transition-duration: 0.5s;
+      &>nav{
+        padding-top: 10px;
+        background-color: #fff;
+        >ul{
+          margin: 0;
+        }
+      }
+
+      nav#block-mathallo-contenu{
+        padding: 1em;
+        ul,li{
+          padding: 0;
+          margin:0;
+          list-style: none;
+        }
+        li{
+          padding:0 0 1em 0;
+          &:first-child{
+            padding:0.25em 0 1em;
+          }
+        }
+        label{
+          color:$bleu_site;
+          font-weight: 600;
+          display: block;
+          font-size: 0.756em;
+          padding:0 0 0.25em 0;
+        }
+        a{
+          font-size: 1.13em;
+        }
+        &>ul{ // chapitres
+          display: flex;
+          flex-direction: row;
+          gap: 2em;
+         >li{
+          >ul{ // parties
+            margin:0.75em 0 0;
+            padding:0 0 0 1em;
+            border-left: 2px solid $bleu_site;
+            >li{
+            }
+          }
+
+         }
+        }
+      }
+      nav#block-mathallo-navigationprincipale{
+        padding: 2em 1em;
+        ul{
+          display: flex;
+          justify-content: flex-end;
+          list-style: none;
+          li{
+            &:not(:last-child){
+            }
+            margin-right: 1em;
+            background-color: $bleu_site;
+            color: #fff;
+            padding:0.5em 1em;
+          }
         }
       }
     }
+
   }
 } // end of header[role="banner"]{