layour and burger menu

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"]{
+