layour and burger menu

web/themes/custom/leshed/assets/dist/main.js

@@ -1 +1 @@
-(function(o,e){(function(){e.path.isFront,console.log("drupalSettings",e);function n(){console.log("LeShedTheme init()")}n()})()})(Drupal,drupalSettings);
+(function(i,e){(function(){e.path.isFront,console.log("drupalSettings",e);function t(){console.log("LeShedTheme init()"),n()}function n(){document.getElementById("burger-btn").parentElement.addEventListener("click",function(r){this.firstElementChild.toggleAttribute("opened"),this.firstElementChild.nextElementSibling.toggleAttribute("opened")})}t()})()})(Drupal,drupalSettings);

web/themes/custom/leshed/assets/dist/main5.css

@@ -0,0 +1 @@
+@font-face{font-family:Epilogue;src:url(/main.css) format("woff2"),url(/main3.css) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Epilogue;src:url(/main2.css) format("woff2"),url(/main4.css) format("woff");font-weight:400;font-style:normal;font-display:swap}body{font-family:Epilogue;font-weight:400;font-style:normal}a,a:visited{text-decoration:none;color:inherit;transition:color .15s ease-out}body{margin:0}div.layout-container{display:flex;flex-direction:column;height:100vh;overflow:hidden;max-width:1080px;margin:0 auto}div.layout-container header[role=banner]{padding:.5em 0;flex:0 1 content;z-index:100;height:50px}div.layout-container main[role=main]{flex:1 1 auto;overflow-y:scroll}header[role=banner]{background-color:#fff}header[role=banner] .header-middle{display:flex;justify-content:space-between;align-items:center;padding:.2em 2em}header[role=banner] #block-leshed-identitedusite a{text-decoration:none;font-size:2em;font-weight:500}header[role=banner] .header-right{height:20px;width:20px;cursor:pointer}header[role=banner] .header-right>div#burger-btn{position:relative;transition-duration:.5s;transition-property:transform;top:8.5px}header[role=banner] .header-right>div#burger-btn,header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{width:20px;height:3px;background-color:red}header[role=banner] .header-right>div#burger-btn:hover,header[role=banner] .header-right>div#burger-btn:hover:before,header[role=banner] .header-right>div#burger-btn:hover:after{background-color:green}header[role=banner] .header-right>div#burger-btn:before,header[role=banner] .header-right>div#burger-btn:after{content:"";position:absolute;left:0}header[role=banner] .header-right>div#burger-btn:before{top:6px}header[role=banner] .header-right>div#burger-btn:after{bottom:6px}header[role=banner] .header-right>div#burger-btn[opened]{transform:rotate(90deg)}header[role=banner] .header-right>div.wrapper{position:absolute;top:50px;left:0;background-color:#000000bf;width:100vw;height:0;overflow:hidden;transition-duration:.5s}header[role=banner] .header-right>div.wrapper[opened]{height:calc(100vh - 50px)}header[role=banner] .header-right>div.wrapper>nav{padding-top:10px;background-color:#fff}header[role=banner] .header-right>div.wrapper>nav>ul{margin:0}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale{padding:2em 1em}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale ul{display:flex;justify-content:flex-end;list-style:none}header[role=banner] .header-right>div.wrapper nav#block-mathallo-navigationprincipale ul li{margin-right:1em;color:#fff;padding:.5em 1em}

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

@@ -36,6 +36,7 @@ import '../scss/main.scss'
     // |___|_||_|_|\__|
     function init () {
       console.log('LeShedTheme init()')
+      initBurgerMenu();
       // initVues()
     }
 
@@ -48,6 +49,14 @@ import '../scss/main.scss'
       })
     }
 
+    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 initVues(){
     //   console.log('initVues');

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

@@ -13,3 +13,160 @@ body{
   // background-color: green;
 }
 
+$header_height: 50px;
+
+//  _                             _
+// | |                           | |
+// | |     __ _ _   _  ___  _   _| |_
+// | |    / _` | | | |/ _ \| | | | __|
+// | |___| (_| | |_| | (_) | |_| | |_
+// \_____/\__,_|\__, |\___/ \__,_|\__|
+//               __/ |
+//              |___/
+
+div.layout-container{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  max-width:1080px;
+  margin: 0 auto;
+  header[role="banner"]{
+    padding: 0.5em 0;
+    flex: 0 1 content;
+    z-index: 100;
+    // position: fixed;
+    // top:0;
+    // width: 100%;
+    height: $header_height;
+  }
+  main[role="main"]{
+    flex: 1 1 auto;
+    // padding:5em 0;
+    overflow-y: scroll;
+  }
+  // footer[role="contentinfo"]{
+  //   // flex: 0 1 content;
+  //   z-index: 100;
+  //   position: fixed;
+  //   bottom: 0;
+  //   width: 100%;
+  // }
+}
+
+
+
+//  _   _                _
+// | | | |              | |
+// | |_| | ___  __ _  __| | ___ _ __
+// |  _  |/ _ \/ _` |/ _` |/ _ \ '__|
+// | | | |  __/ (_| | (_| |  __/ |
+// \_| |_/\___|\__,_|\__,_|\___|_|
+
+
+header[role="banner"]{
+  background-color: #fff;
+  // box-shadow: 0 -5px 15px #000;
+
+  .header-middle{
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    padding: 0.2em 2em;
+  }
+
+  #block-leshed-identitedusite{
+    a{
+      // color: ;
+      text-decoration: none;
+      font-size: 2em;
+      font-weight: 500;
+
+      // &:hover{
+      //   color: $rose;
+      // }
+    }
+  }
+
+  .header-right{
+    // position: relative;
+    height:20px; width:20px;
+    cursor: pointer;
+    // background-color: green;
+
+    >div#burger-btn{
+      position:relative;
+      transition-duration: 0.5s;
+      transition-property: transform;
+      top: 8.5px;
+      &, &::before, &::after{
+        // position: absolute;
+        width:20px; height:3px;
+        background-color: red;
+
+      }
+      &:hover{
+        &, &::before, &::after{
+          background-color: green;
+        }
+      }
+      &::before, &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        // background-color: red;
+      }
+      &::before{
+        top:6px;
+      }
+      &::after{
+        bottom: 6px;
+      }
+      &[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;
+      transition-duration: 0.5s;
+      &[opened]{
+        height: calc(100vh - $header_height);
+      }
+      &>nav{
+        padding-top: 10px;
+        background-color: #fff;
+        >ul{
+          margin: 0;
+        }
+      }
+
+      nav#block-mathallo-navigationprincipale{
+        padding: 2em 1em;
+        ul{
+          display: flex;
+          justify-content: flex-end;
+          list-style: none;
+          li{
+            margin-right: 1em;
+            // background-color: $bleu_site;
+            color: #fff;
+            padding:0.5em 1em;
+            &:not(:last-child){
+            }
+          }
+        }
+      }
+    }
+
+  }
+} // end of header[role="banner"]{
+