From 1733ad128a916516433e0b3d2f8addb38eb9f03c Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Fri, 26 Mar 2021 16:48:47 +0100
Subject: [PATCH] started full header-right responsive hamburger menu

---
 .../custom/materiotheme/assets/dist/main.css  | 131 ++++++++----------
 .../assets/styles/base/_layout.scss           |  40 +++++-
 .../materiotheme/assets/styles/main.scss      | 104 +++++++-------
 .../block/block--menu-block--header.html.twig |   6 +-
 .../templates/layout/page.html.twig           |  10 +-
 5 files changed, 160 insertions(+), 131 deletions(-)

diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css
index 2f659cd..54cecc3 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -19229,83 +19229,101 @@ div.dialog-off-canvas-main-canvas {
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
   padding-top: 24px !important; }
 
-header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
   margin: 0 auto; }
   @media only screen and (max-width: 218px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 218px; } }
   @media only screen and (min-width: 437px) and (max-width: 654px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 436px; } }
   @media only screen and (min-width: 655px) and (max-width: 872px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 654px; } }
   @media only screen and (min-width: 873px) and (max-width: 1090px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 872px; } }
   @media only screen and (min-width: 1091px) and (max-width: 1308px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 1090px; } }
   @media only screen and (min-width: 1309px) and (max-width: 1526px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 1308px; } }
   @media only screen and (min-width: 1527px) and (max-width: 1744px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 1526px; } }
   @media only screen and (min-width: 1745px) and (max-width: 1962px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 1744px; } }
   @media only screen and (min-width: 1963px) and (max-width: 2180px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 1962px; } }
   @media only screen and (min-width: 2181px) and (max-width: 2398px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 2180px; } }
   @media only screen and (min-width: 2399px) and (max-width: 2616px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 2398px; } }
   @media only screen and (min-width: 2617px) and (max-width: 2834px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 2616px; } }
   @media only screen and (min-width: 2835px) and (max-width: 3052px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 2834px; } }
   @media only screen and (min-width: 3053px) and (max-width: 3270px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 3052px; } }
   @media only screen and (min-width: 3271px) and (max-width: 3488px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 3270px; } }
   @media only screen and (min-width: 3489px) and (max-width: 3706px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 3488px; } }
   @media only screen and (min-width: 3707px) and (max-width: 3924px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 3706px; } }
   @media only screen and (min-width: 3925px) and (max-width: 4142px) {
-    header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
+    header[role="banner"] > .wrapper, main[role="main"] > .scroller > .wrapper, footer[role="contentinfo"] > .wrapper {
       width: 3924px; } }
 
 header[role="banner"] {
   flex: 0 0 auto;
   background-color: #fff;
   width: 100vw; }
-  header[role="banner"] .wrapper {
+  header[role="banner"] > .wrapper {
     background-color: #fff; }
-    header[role="banner"] .wrapper:after {
+    header[role="banner"] > .wrapper:after {
       content: "";
       clear: both;
       display: block; }
-    header[role="banner"] .wrapper .header-block {
+    header[role="banner"] > .wrapper .header-block {
       min-height: 15px;
       font-size: 0; }
-      header[role="banner"] .wrapper .header-block.header-right {
+      header[role="banner"] > .wrapper .header-block > * {
+        font-size: 16px; }
+      header[role="banner"] > .wrapper .header-block.header-right {
         text-align: right; }
-      header[role="banner"] .wrapper .header-block > * {
+      header[role="banner"] > .wrapper .header-block .header-block-wrapper > * {
         display: inline-block;
         vertical-align: top;
-        font-size: 16px;
         text-align: left; }
+      header[role="banner"] > .wrapper .header-block input#header-block-right-toggle {
+        display: none; }
+      header[role="banner"] > .wrapper .header-block label[for="header-block-right-toggle"] {
+        display: none; }
+      @media (max-width: 654px) {
+        header[role="banner"] > .wrapper .header-block.header-right label[for="header-block-right-toggle"] {
+          display: block; }
+        header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper {
+          position: absolute;
+          right: 0;
+          background-color: green;
+          transform: translateX(150px);
+          transition: transform 0.5s ease-in-out; }
+          header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > * {
+            display: block; }
+        header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
+          transform: translateX(1px); } }
 
 main[role="main"] {
   flex: 1 1 auto;
@@ -19362,18 +19380,12 @@ header[role="banner"] {
     font-size: 0.882em;
     display: block;
     white-space: nowrap; }
-    @media (max-width: 436px) {
-      header[role="banner"] #block-sitebranding .slogan {
-        display: none; } }
   header[role="banner"] #block-socialmedialinks {
     padding-right: 0.5em;
     border-right: 1px solid #1A1A1A;
     margin-right: 0.5em; }
     header[role="banner"] #block-socialmedialinks li {
       padding: 0; }
-    @media (max-width: 872px) {
-      header[role="banner"] #block-socialmedialinks {
-        display: none; } }
   header[role="banner"] #block-userlogin {
     position: relative;
     padding: 0 1em;
@@ -19385,24 +19397,26 @@ header[role="banner"] {
       background-color: #fff;
       overflow: hidden;
       width: 11em;
-      max-height: 0px;
-      padding: 0.01em 1em;
       box-sizing: content-box;
       transition: all 0.4s ease-in-out;
-      transition-delay: 2s;
-      position: absolute;
       right: 0;
       top: 1.7em;
       box-sizing: content-box;
       z-index: 100; }
-    @media (hover: hover) {
+    @media (min-width: 655px) {
       header[role="banner"] #block-userlogin {
-        /* solves sticky problem */ }
-        header[role="banner"] #block-userlogin:hover > section {
-          transition-delay: 0s;
-          max-height: 20em;
-          padding: 1em 1em;
-          box-shadow: 0 0 10px #ccc; } }
+        max-height: 0px;
+        padding: 0.01em 1em;
+        transition-delay: 2s;
+        position: absolute; } }
+  @media (min-width: 655px) and (hover: hover) {
+    header[role="banner"] #block-userlogin {
+      /* solves sticky problem */ }
+      header[role="banner"] #block-userlogin:hover > section {
+        transition-delay: 0s;
+        max-height: 20em;
+        padding: 1em 1em;
+        box-shadow: 0 0 10px #ccc; } }
     header[role="banner"] #block-userlogin .form-item {
       margin: 0;
       position: relative;
@@ -19449,9 +19463,6 @@ header[role="banner"] {
     padding-top: 0.06em; }
     header[role="banner"] #user-tools a.mdi-account {
       cursor: pointer; }
-      @media (max-width: 1090px) {
-        header[role="banner"] #user-tools a.mdi-account span {
-          display: none; } }
     header[role="banner"] #user-tools .mdi-logout::before {
       margin: -0.125em 0 0 0;
       vertical-align: top; }
@@ -19466,9 +19477,6 @@ header[role="banner"] {
       cursor: pointer; }
       header[role="banner"] #user-flags h2:before {
         padding-right: 0.2em; }
-      @media (max-width: 1090px) {
-        header[role="banner"] #user-flags h2 span {
-          display: none; } }
     header[role="banner"] #user-flags ul {
       background-color: #fff;
       overflow: hidden;
@@ -19541,8 +19549,7 @@ header[role="banner"] {
     margin-right: 1em;
     padding-left: 1em;
     border-left: 1px solid #000; }
-    header[role="banner"] #block-header #block-header-menu,
-    header[role="banner"] #block-header label[for="block-header-menu"] {
+    header[role="banner"] #block-header #block-header-menu {
       display: none; }
     header[role="banner"] #block-header ul.menu {
       margin: 0; }
@@ -19553,28 +19560,8 @@ header[role="banner"] {
       header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
         margin-left: 0.5em; }
     @media (max-width: 654px) {
-      header[role="banner"] #block-header {
-        position: relative;
-        /* Toggle Show/Hide Menu */ }
-        header[role="banner"] #block-header label[for="block-header-menu"] {
-          display: block; }
-        header[role="banner"] #block-header ul.menu {
-          display: none; }
-        header[role="banner"] #block-header input:checked ~ ul.menu {
-          display: block; }
-        header[role="banner"] #block-header ul.menu {
-          position: absolute;
-          width: 110px;
-          height: auto;
-          top: 18.9px;
-          right: 0;
-          background-color: white;
-          padding: 0.2em 0.5em;
-          margin-right: -0.5em;
-          z-index: 90;
-          text-align: right; }
-          header[role="banner"] #block-header ul.menu li {
-            display: block; } }
+      header[role="banner"] #block-header ul.menu li {
+        display: block; } }
   header[role="banner"] #block-languageswitcher {
     text-align: right;
     position: relative;
diff --git a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
index 0de5b97..fa5dd54 100644
--- a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
+++ b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
@@ -57,7 +57,7 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   }
 }
 @mixin col-mediaquery-min($i) {
-  $bp: ($column_width + $column_goutiere) * $i;
+  $bp: ($column_width + $column_goutiere) * $i + 1px;
   @media (min-width: $bp) {
     @content;
   }
@@ -113,7 +113,7 @@ header[role="banner"]{
   // z-index: 20;
   width:100vw;
   // height: $header_height;
-  .wrapper{
+  >.wrapper{
     @extend %grided-width;
     // box-sizing:border-box;
     background-color: #fff;
@@ -127,14 +127,40 @@ header[role="banner"]{
     .header-block{
       min-height: 15px;
       font-size: 0;
+      &>*{
+        font-size: $base_font_size;
+      }
       &.header-right{
         text-align: right;
       }
-      &>*{
-        display: inline-block;
-        vertical-align:top;
-        font-size: $base_font_size;
-        text-align: left;
+      .header-block-wrapper{
+        &>*{
+          display: inline-block;
+          vertical-align:top;
+          text-align: left;
+        }
+      }
+      input#header-block-right-toggle{display: none;}
+      label[for="header-block-right-toggle"]{display:none;}
+      @include col-mediaquery-max(3){
+        &.header-right{
+          label[for="header-block-right-toggle"]{
+            display:block;
+          }
+          .header-block-wrapper{
+            position: absolute;
+            right:0;
+            background-color: green;
+            transform: translateX(150px);
+            transition: transform 0.5s ease-in-out;
+            >*{
+              display: block;
+            }
+          }
+          input#header-block-right-toggle:checked ~ div.header-block-wrapper {
+            transform: translateX(1px);
+          }
+        }
       }
     }
   }
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 06ff9a0..107431d 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -63,9 +63,9 @@ header[role="banner"]{
 			font-size: 0.882em;
 			display: block;
 			white-space: nowrap;
-      @include col-mediaquery-max(2){
-        display:none;
-      }
+      // @include col-mediaquery-max(2){
+      //   display:none;
+      // }
     }
   }
 
@@ -76,9 +76,9 @@ header[role="banner"]{
     li{
       padding:0;
     }
-    @include col-mediaquery-max(4){
-      display:none;
-    }
+    // @include col-mediaquery-max(4){
+    //   display:none;
+    // }
   }
 
   #block-userlogin{
@@ -95,27 +95,30 @@ header[role="banner"]{
       background-color: #fff;
       overflow: hidden;
       width:11em;
-      max-height:0px;
-      padding:0.01em 1em;
       // margin:0 0 0 -1em;
       box-sizing:content-box;
       transition: all 0.4s ease-in-out;
       // outline: 1px solid blue;
-      transition-delay: 2s;
-      position: absolute;
       right:0;
       top:1.7em;
       box-sizing: content-box;
       z-index:100;
     }
-    @include hover{
-      &>section{
-        transition-delay: 0s;
-        max-height:20em;
-        padding:1em 1em;
-        box-shadow: 0 0 10px #ccc;
-      }
-    }
+		@include col-mediaquery-min(3){
+			max-height:0px;
+      padding:0.01em 1em;
+			transition-delay: 2s;
+      position: absolute;
+
+			@include hover{
+				&>section{
+					transition-delay: 0s;
+					max-height:20em;
+					padding:1em 1em;
+					box-shadow: 0 0 10px #ccc;
+				}
+			}
+		}
     .form-item{
       margin:0;
       position: relative;
@@ -185,9 +188,9 @@ header[role="banner"]{
       @extend %header-fs;
       cursor: pointer;
       span{
-        @include col-mediaquery-max(5){
-          display:none;
-        }
+        // @include col-mediaquery-max(5){
+        //   display:none;
+        // }
       }
     }
     .mdi-logout::before {
@@ -209,9 +212,9 @@ header[role="banner"]{
       cursor: pointer;
       &:before{padding-right: 0.2em;}
       span{
-        @include col-mediaquery-max(5){
-          display:none;
-        }
+        // @include col-mediaquery-max(5){
+        //   display:none;
+        // }
       }
     }
     ul{
@@ -310,10 +313,12 @@ header[role="banner"]{
     margin-right: 1em;
     padding-left: 1em;
     border-left: 1px solid #000;
-    #block-header-menu,
-    label[for="block-header-menu"]{
+		#block-header-menu{
       display:none;
     }
+    // label[for="block-header-menu"]{
+    //   display:none;
+    // }
     ul.menu{
       margin:0;
       li{
@@ -334,30 +339,35 @@ header[role="banner"]{
       }
     // }
     @include col-mediaquery-max(3){
-      position: relative;
-
-      label[for="block-header-menu"]{
-        display:block;
-      }
-      /* Toggle Show/Hide Menu */
-      // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
-      ul.menu { display: none; }
-      input:checked ~ ul.menu { display: block; }
-      ul.menu{
-        position: absolute;
-        width: 110px;
-        height: auto;
-        top: 18.9px;
-        right: 0;
-        background-color: white;
-        padding: 0.2em 0.5em;
-        margin-right: -0.5em;
-        z-index: 90;
-        text-align: right;
+      // position: relative;
+			//
+      // label[for="block-header-menu"]{
+      //   display:block;
+      // }
+      // /* Toggle Show/Hide Menu */
+      // // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
+      // ul.menu { display: none; }
+      // input:checked ~ ul.menu { display: block; }
+      // ul.menu{
+      //   position: absolute;
+      //   width: 110px;
+      //   height: auto;
+      //   top: 18.9px;
+      //   right: 0;
+      //   background-color: white;
+      //   padding: 0.2em 0.5em;
+      //   margin-right: -0.5em;
+      //   z-index: 90;
+      //   text-align: right;
+			// 	li{
+			// 		display: block;
+			// 	}
+      // }
+			ul.menu{
 				li{
 					display: block;
 				}
-      }
+			}
     }
   }
 
diff --git a/web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig b/web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig
index a1facd0..0e8124a 100644
--- a/web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig
+++ b/web/themes/custom/materiotheme/templates/block/block--menu-block--header.html.twig
@@ -45,9 +45,9 @@
   {% if not configuration.label_display %}
     {% set title_attributes = title_attributes.addClass('visually-hidden') %}
   {% endif %}
-  <!-- <h2{{ title_attributes.setAttribute('id', heading_id) }}>&#9776;</h2> -->
-  <label for="{{ heading_id }}">&#9776;</label>
-  <input type="checkbox" id="{{ heading_id }}"/>
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>&#9776;</h2>
+  <!-- <label for="{{ heading_id }}">&#9776;</label>
+  <input type="checkbox" id="{{ heading_id }}"/> -->
 
   {# Menu. #}
   {% block content %}
diff --git a/web/themes/custom/materiotheme/templates/layout/page.html.twig b/web/themes/custom/materiotheme/templates/layout/page.html.twig
index f42d96d..aadac40 100644
--- a/web/themes/custom/materiotheme/templates/layout/page.html.twig
+++ b/web/themes/custom/materiotheme/templates/layout/page.html.twig
@@ -43,12 +43,18 @@
       {{ page.header }}
       <div class="header-block header-left col-4">
         {% if page.header_left %}
-          {{ page.header_left}}
+          <div class="header-block-wrapper">
+            {{ page.header_left}}
+          </div>
         {% endif %}
       </div>
       <div class="header-block header-right col-8">
+        <label for="header-block-right-toggle">&#9776;</label>
+        <input type="checkbox" id="header-block-right-toggle"/>
         {% if page.header_right %}
-          {{ page.header_right}}
+          <div class="header-block-wrapper">
+              {{ page.header_right}}
+          </div>
         {% endif %}
       </div>
     </div>