improved my folders display on header

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

@@ -74,7 +74,7 @@ header[role="banner"]{
       }
       &>*{
         display: inline-block;
-        vertical-align: top;
+        vertical-align:top;
         font-size: $base_font_size;
         text-align: left;
       }

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

@@ -134,7 +134,90 @@ header[role="banner"]{
   }
   // vue userblock
   #user-tools{
+    padding-top: 0.06em;
+    h4{
+      @extend %header-fs;
+      cursor: pointer;
+    }
+    .mdi-logout::before {
+      margin: -0.125em 0 0 0;
+      vertical-align: top;
+    }
+  }
 
+  // vue flaglist
+  #user-flags{
+    border-left: 1px solid #000;
+    padding-left: 0.5em;
+    margin-left: 0.5em;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    h2{
+      @extend %header-fs;
+      cursor: pointer;
+    }
+    ul{
+      position: absolute;
+      width:8em;
+      left:0;
+      background-color: #fff;
+      border-radius: 3px;
+      background-clip: padding-box;
+      box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
+      padding:0.3em 0.3em 0.5em;
+      opacity:0;
+      max-height:1px;
+      transition: opacity,max-height 0.3s ease-in-out;
+      overflow: hidden;
+    }
+    &:hover{
+      ul{
+        opacity:1;
+        max-height:100px;
+        transition: opacity,max-height 0.2s ease-in-out;
+      }
+    }
+    li{
+      width:100%;
+      // cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      flex-wrap: nowrap;
+      h5{
+        @extend %header-fs;
+        cursor: pointer;
+      }
+      span.mdi{
+        font-size: 0.9em;
+      }
+      div.actions{
+        opacity:0;
+        transition: opacity 0.3s ease-in-out;
+        padding-left:0.5em;
+      }
+      &:hover{
+        div.actions{
+          opacity:1;
+        }
+      }
+
+      input{
+          border: 1px solid #bbb;
+          border-radius:5px;
+          width: calc(100% - 2em);
+          font-size:0.8em;
+        // border: none;
+        // background-color:rgb(201, 201, 201);
+        // width:100%;
+      }
+      span.mdi-plus-box,
+      span.mdi-trash-can-outline{
+        cursor: pointer;
+        color: #4e4d4d;
+      }
+    }
   }
 
   // menu