improved my folders display on header

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

@@ -0,0 +1,11 @@
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+    transform-origin: center;
+  }
+  to {
+    transform: rotate(360deg);
+    transform-origin: center;
+  }
+}

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

@@ -11,8 +11,7 @@
 @import './base/colors';
 @import './base/grid';
 @import './base/layout';
-// $mdi-font-path: "./mdi/fonts";
-// @import './mdi/scss/materialdesignicons.scss';
+@import './base/animations';
 @import './base/fonts';
 
 
@@ -156,26 +155,30 @@ header[role="banner"]{
     h2{
       @extend %header-fs;
       cursor: pointer;
+      &:before{padding-right: 0.2em;}
     }
     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;
+      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;
     }
     &:hover{
       ul{
-        opacity:1;
-        max-height:100px;
-        transition: opacity,max-height 0.2s ease-in-out;
+        transition-delay: 0s;
+        max-height:12em;
+        padding:1em 1em;
+        box-shadow: 0 0 10px #ccc;
       }
     }
     li{
@@ -196,6 +199,16 @@ header[role="banner"]{
         opacity:0;
         transition: opacity 0.3s ease-in-out;
         padding-left:0.5em;
+
+        span.mdi{
+          cursor: pointer;
+          color: #4e4d4d;
+        }
+        span.delete-btn{
+          &.loading:before{
+            animation: rotating 2s linear infinite;
+          }
+        }
       }
       &:hover{
         div.actions{
@@ -203,19 +216,29 @@ header[role="banner"]{
         }
       }
 
-      input{
+      &.create-flag{
+        margin-top: 0.2em;
+        input{
+          align-self: flex-end;
           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;
+        }
+        span.add-btn{
+          align-self: flex-end;
+          color: #bbb;
+          font-size: 1em;
+          padding: 0 0 0 .5em;
+          transition: all 0.2s ease-in-out;
+          &.active{
+            cursor: pointer;
+            color:#1a1a1a;
+          }
+          &.loading:before{
+            animation: rotating 2s linear infinite;
+          }
+        }
       }
     }
   }