full header-right responsive hamburger menu ok for logged-in users

web/themes/custom/materiotheme/assets/dist/main.css

@@ -19319,20 +19319,21 @@ header[role="banner"] {
           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 {
+            z-index: 10;
             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 {
+            header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block, header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools {
               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) {
+              header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > *.block:not(:last-child), header[role="banner"] > .wrapper .header-block.header-right .header-block-wrapper > div#user-tools: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; } }
@@ -19488,7 +19489,6 @@ header[role="banner"] {
       margin: -0.125em 0 0 0;
       vertical-align: top; }
   header[role="banner"] #user-flags {
-    border-left: 1px solid #000;
     padding-left: 0.5em;
     margin-left: 0.5em;
     display: inline-block;
@@ -19501,25 +19501,29 @@ header[role="banner"] {
     header[role="banner"] #user-flags ul {
       background-color: #fff;
       overflow: hidden;
-      width: 11em;
-      max-height: 1px;
-      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: 30; }
-    @media (hover: hover) {
+      box-sizing: content-box; }
+    @media (min-width: 655px) {
       header[role="banner"] #user-flags {
-        /* solves sticky problem */ }
-        header[role="banner"] #user-flags:hover ul {
-          transition-delay: 0s;
-          max-height: 50em;
-          padding: 1em 1em;
-          box-shadow: 0 0 10px #ccc; } }
+        border-left: 1px solid #000; }
+        header[role="banner"] #user-flags ul {
+          transition: all 0.4s ease-in-out;
+          transition-delay: 2s;
+          z-index: 30;
+          position: absolute;
+          right: 0;
+          top: 1.7em;
+          width: 11em;
+          max-height: 1px;
+          padding: 0.01em 1em; } }
+  @media (min-width: 655px) and (hover: hover) {
+    header[role="banner"] #user-flags {
+      /* solves sticky problem */ }
+      header[role="banner"] #user-flags:hover ul {
+        transition-delay: 0s;
+        max-height: 50em;
+        padding: 1em 1em;
+        box-shadow: 0 0 10px #ccc; } }
     header[role="banner"] #user-flags li {
       width: 100%;
       display: flex;
@@ -19534,19 +19538,28 @@ header[role="banner"] {
       header[role="banner"] #user-flags li span.mdi {
         font-size: 0.9em; }
       header[role="banner"] #user-flags li div.actions {
-        opacity: 0;
-        transition: opacity 0.3s ease-in-out;
         padding-left: 0.5em; }
         header[role="banner"] #user-flags li div.actions span.mdi {
           cursor: pointer;
           color: #4e4d4d; }
         header[role="banner"] #user-flags li div.actions span.delete-btn.loading:before {
           animation: rotating 2s linear infinite; }
-      @media (hover: hover) {
+      @media (min-width: 655px) {
+        header[role="banner"] #user-flags li div.actions {
+          opacity: 0;
+          transition: opacity 0.3s ease-in-out; } }
+
+@media (min-width: 655px) and (hover: hover) {
+  header[role="banner"] #user-flags li {
+    /* solves sticky problem */ }
+    header[role="banner"] #user-flags li:hover div.actions {
+      opacity: 1; } }
+      @media (max-width: 654px) {
         header[role="banner"] #user-flags li {
-          /* solves sticky problem */ }
-          header[role="banner"] #user-flags li:hover div.actions {
-            opacity: 1; } }
+          flex-direction: row-reverse; }
+          header[role="banner"] #user-flags li div.actions {
+            padding-left: 0;
+            padding-right: 0.5em; } }
       header[role="banner"] #user-flags li.create-flag {
         margin-top: 0.2em; }
         header[role="banner"] #user-flags li.create-flag input {

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -152,6 +152,7 @@ header[role="banner"]{
           }
           // default position (hidden, translated right)
           .header-block-wrapper{
+            z-index: 10;
             position: absolute;
             top: $min-height;
             $w: 300px;
@@ -161,7 +162,7 @@ header[role="banner"]{
             // transform: translateX(150px);
             transition: right 0.5s ease-in-out;
 
-            >*.block{
+            >*.block, >div#user-tools{
               display: block;
               padding:0 0 0.5em 0!important;
               margin:0 0 0.5em 0!important;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -219,7 +219,6 @@ header[role="banner"]{
 
   // vue flaglist
   #user-flags{
-    border-left: 1px solid #000;
     padding-left: 0.5em;
     margin-left: 0.5em;
     display: inline-block;
@@ -238,28 +237,35 @@ header[role="banner"]{
     ul{
       background-color: #fff;
       overflow: hidden;
-      width:11em;
-      max-height:1px;
-      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: 30;
-    }
-    @include hover{
-      ul{
-        transition-delay: 0s;
-        max-height:50em;
-        padding:1em 1em;
-        box-shadow: 0 0 10px #ccc;
-      }
     }
+		// folders menu dropdown only for gig screens
+		@include col-mediaquery-min(3){
+	    border-left: 1px solid #000;
+			ul{
+				transition: all 0.4s ease-in-out;
+				transition-delay: 2s;
+				z-index: 30;
+				position: absolute;
+				right:0;
+				top:1.7em;
+				width:11em;
+				max-height:1px;
+				padding:0.01em 1em;
+
+			}
+			@include hover{
+				ul{
+					transition-delay: 0s;
+					max-height:50em;
+					padding:1em 1em;
+					box-shadow: 0 0 10px #ccc;
+				}
+			}
+		}
     li{
       width:100%;
       // cursor: pointer;
@@ -279,8 +285,6 @@ header[role="banner"]{
         font-size: 0.9em;
       }
       div.actions{
-        opacity:0;
-        transition: opacity 0.3s ease-in-out;
         padding-left:0.5em;
 
         span.mdi{
@@ -293,12 +297,26 @@ header[role="banner"]{
           }
         }
       }
-      @include hover{
-        div.actions{
-          opacity:1;
-        }
-      }
+			@include col-mediaquery-min(3){
+				div.actions{
+					opacity:0;
+	        transition: opacity 0.3s ease-in-out;
+				}
 
+				@include hover{
+					div.actions{
+						opacity:1;
+					}
+				}
+			}
+			// small screens
+			@include col-mediaquery-max(3){
+				flex-direction: row-reverse;
+				div.actions{
+					padding-left: 0;
+					padding-right: 0.5em;
+				}
+			}
       &.create-flag{
         margin-top: 0.2em;
         input{