From 5df8c9829ae98e2d596a76fd01ab642363b1eaf9 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Mon, 29 Mar 2021 11:43:37 +0200
Subject: [PATCH] full header-right responsive hamburger menu ok for
 unlogged-in users

---
 .../custom/materiotheme/assets/dist/main.css  | 111 +++++++++++-------
 .../assets/styles/base/_layout.scss           |  32 +++--
 .../materiotheme/assets/styles/main.scss      |  71 +++++++----
 3 files changed, 145 insertions(+), 69 deletions(-)

diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css
index 54cecc36..69563656 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -19297,7 +19297,7 @@ header[role="banner"] {
       clear: both;
       display: block; }
     header[role="banner"] > .wrapper .header-block {
-      min-height: 15px;
+      min-height: 33px;
       font-size: 0; }
       header[role="banner"] > .wrapper .header-block > * {
         font-size: 16px; }
@@ -19312,18 +19312,30 @@ header[role="banner"] {
       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 > * {
+        header[role="banner"] > .wrapper .header-block.header-left {
+          width: 75%; }
+        header[role="banner"] > .wrapper .header-block.header-right {
+          width: 23%; }
+          header[role="banner"] > .wrapper .header-block.header-right label[for="header-block-right-toggle"] {
             display: block; }
-        header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
-          transform: translateX(1px); } }
+          header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper {
+            position: absolute;
+            top: 33px;
+            width: 300px;
+            right: -450px;
+            box-sizing: border-box;
+            transition: right 0.5s ease-in-out; }
+            header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block {
+              display: block;
+              padding: 0 0 0.5em 0 !important;
+              margin: 0 0 0.5em 0 !important;
+              text-align: right;
+              border-left: none !important;
+              border-right: none !important; }
+              header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block:not(:last-child) {
+                border-bottom: 1px solid #ccc !important; }
+          header[role="banner"] > .wrapper .header-block.header-right input#header-block-right-toggle:checked ~ div.header-block-wrapper {
+            right: 1px; } }
 
 main[role="main"] {
   flex: 1 1 auto;
@@ -19380,6 +19392,14 @@ header[role="banner"] {
     font-size: 0.882em;
     display: block;
     white-space: nowrap; }
+  @media (max-width: 654px) {
+    header[role="banner"] #block-sitebranding h1, header[role="banner"] #block-sitebranding .slogan {
+      display: inline-block; } }
+  @media (max-width: 654px) {
+    header[role="banner"] .header-block.header-right .header-block-wrapper {
+      padding: 1em 1em;
+      box-shadow: -2px 2px 4px #ccc;
+      background-color: #fff; } }
   header[role="banner"] #block-socialmedialinks {
     padding-right: 0.5em;
     border-right: 1px solid #1A1A1A;
@@ -19394,9 +19414,8 @@ header[role="banner"] {
       line-height: 1.38;
       margin: 0; }
     header[role="banner"] #block-userlogin > section {
-      background-color: #fff;
       overflow: hidden;
-      width: 11em;
+      background-color: #fff;
       box-sizing: content-box;
       transition: all 0.4s ease-in-out;
       right: 0;
@@ -19404,19 +19423,21 @@ header[role="banner"] {
       box-sizing: content-box;
       z-index: 100; }
     @media (min-width: 655px) {
-      header[role="banner"] #block-userlogin {
+      header[role="banner"] #block-userlogin > section {
         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; } }
+        position: absolute;
+        width: 11em; } }
+
+@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;
@@ -19560,8 +19581,10 @@ 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 ul.menu li {
-        display: block; } }
+      header[role="banner"] #block-header ul.menu {
+        text-align: right; }
+        header[role="banner"] #block-header ul.menu li {
+          display: block; } }
   header[role="banner"] #block-languageswitcher {
     text-align: right;
     position: relative;
@@ -19589,23 +19612,29 @@ header[role="banner"] {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale; }
     header[role="banner"] #block-languageswitcher > ul.links {
-      position: absolute;
-      top: 17px;
-      right: 0;
       overflow: hidden;
-      width: 3.5em;
-      height: 1px;
-      padding: 0.01em 0;
       margin: 0;
-      box-sizing: content-box;
-      transition: all 0.4s ease-in-out; }
-    @media (hover: hover) {
-      header[role="banner"] #block-languageswitcher {
-        /* solves sticky problem */ }
-        header[role="banner"] #block-languageswitcher:hover > ul.links {
-          transition-delay: 0s;
-          height: 2em;
-          padding: 0.3em 0; } }
+      box-sizing: content-box; }
+    @media (min-width: 655px) {
+      header[role="banner"] #block-languageswitcher > ul.links {
+        width: 3.5em;
+        position: absolute;
+        top: 17px;
+        right: 0;
+        transition: all 0.4s ease-in-out;
+        padding: 0.01em 0;
+        height: 1px; } }
+
+@media (min-width: 655px) and (hover: hover) {
+  header[role="banner"] #block-languageswitcher {
+    /* solves sticky problem */ }
+    header[role="banner"] #block-languageswitcher:hover > ul.links {
+      transition-delay: 0s;
+      height: 2em;
+      padding: 0.3em 0; } }
+    @media (max-width: 654px) {
+      header[role="banner"] #block-languageswitcher h2 {
+        display: none; } }
     header[role="banner"] #block-languageswitcher li {
       list-style: none;
       padding: 0;
diff --git a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
index fa5dd54b..08f1303c 100644
--- a/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
+++ b/web/themes/custom/materiotheme/assets/styles/base/_layout.scss
@@ -125,7 +125,8 @@ header[role="banner"]{
     }
 
     .header-block{
-      min-height: 15px;
+      $min-height:33px;
+      min-height: $min-height;
       font-size: 0;
       &>*{
         font-size: $base_font_size;
@@ -143,22 +144,39 @@ header[role="banner"]{
       input#header-block-right-toggle{display: none;}
       label[for="header-block-right-toggle"]{display:none;}
       @include col-mediaquery-max(3){
+        &.header-left{ width: 75%; }
         &.header-right{
+          width: 23%;
           label[for="header-block-right-toggle"]{
             display:block;
           }
+          // default position (hidden, translated right)
           .header-block-wrapper{
             position: absolute;
-            right:0;
-            background-color: green;
-            transform: translateX(150px);
-            transition: transform 0.5s ease-in-out;
-            >*{
+            top: $min-height;
+            $w: 300px;
+            width: $w;
+            right: - $w - 150px;
+            box-sizing: border-box;
+            // transform: translateX(150px);
+            transition: right 0.5s ease-in-out;
+
+            >*.block{
               display: block;
+              padding:0 0 0.5em 0!important;
+              margin:0 0 0.5em 0!important;
+              text-align: right;
+              border-left: none!important;
+              border-right: none!important;
+              &:not(:last-child){
+                border-bottom: 1px solid #ccc!important;
+              }
             }
           }
+          // input checked, wrapper visible
           input#header-block-right-toggle:checked ~ div.header-block-wrapper {
-            transform: translateX(1px);
+            // transform: translateX(1px);
+            right:1px;
           }
         }
       }
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 107431da..8354d16b 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -67,8 +67,23 @@ header[role="banner"]{
       //   display:none;
       // }
     }
+		@include col-mediaquery-max(3){
+			h1, .slogan{
+				display: inline-block;
+			}
+		}
   }
 
+	@include col-mediaquery-max(3){
+		.header-block.header-right{
+			.header-block-wrapper{
+				padding:1em 1em;
+				box-shadow: -2px 2px 4px #ccc;
+				background-color: #fff;
+			}
+		}
+	}
+
   #block-socialmedialinks{
     padding-right: 0.5em;
     border-right: 1px solid $color-main-text;
@@ -92,9 +107,8 @@ header[role="banner"]{
       margin: 0;
     }
     &>section{
+			overflow: hidden;
       background-color: #fff;
-      overflow: hidden;
-      width:11em;
       // margin:0 0 0 -1em;
       box-sizing:content-box;
       transition: all 0.4s ease-in-out;
@@ -104,11 +118,15 @@ header[role="banner"]{
       box-sizing: content-box;
       z-index:100;
     }
+		// appears on hover only on big screens
 		@include col-mediaquery-min(3){
-			max-height:0px;
-      padding:0.01em 1em;
-			transition-delay: 2s;
-      position: absolute;
+			&>section{
+				max-height:0px;
+				padding:0.01em 1em;
+				transition-delay: 2s;
+				position: absolute;
+	      width:11em;
+			}
 
 			@include hover{
 				&>section{
@@ -364,6 +382,7 @@ header[role="banner"]{
 			// 	}
       // }
 			ul.menu{
+				text-align: right;
 				li{
 					display: block;
 				}
@@ -392,29 +411,39 @@ header[role="banner"]{
       overflow: hidden;
     }
     &>ul.links{
-      position: absolute;
-      top:17px;
-      right:0;
       // background-color: #fff;
       overflow: hidden;
-      width:3.5em;
       // display: inline-block;
-      height:1px;
-      padding:0.01em 0;
       margin:0;
       box-sizing:content-box;
-      transition: all 0.4s ease-in-out;
       // outline: 1px solid blue;
       // transition-delay: 2s;
     }
-    @include hover{
-      &>ul.links{
-        transition-delay: 0s;
-        height:2em;
-        padding:0.3em 0;
-        // box-shadow: 0 0 10px #ccc;
-      }
-    }
+
+		@include col-mediaquery-min(3){
+			&>ul.links{
+				width:3.5em;
+				position: absolute;
+				top:17px;
+				right:0;
+				transition: all 0.4s ease-in-out;
+				padding:0.01em 0;
+				height:1px;
+			}
+			@include hover{
+				&>ul.links{
+					transition-delay: 0s;
+					height:2em;
+					padding:0.3em 0;
+					// box-shadow: 0 0 10px #ccc;
+				}
+			}
+		}
+
+		@include col-mediaquery-max(3){
+			h2{display: none;}
+
+		}
     li{
       list-style: none;
       padding:0;