Auf- und Zuklappen funktioniert, allerdings komischer Delay vorhanden

resources/assets/less/metager/sidebar.less

@@ -9,16 +9,15 @@
     position: fixed;
     display: block;
     top: 0px;
-    right: -260px;
-    width: 260px;
+    right: -270px;
+    width: 270px;
     height: 100%;
     padding-top: 70px;
     overflow: hidden;
     overflow-y: auto;
-    transition: 0.5s;
     z-index: 999;
     background-color: white;
-
+    transition: 0.5s;
     &>label#closeSidebar {
         position: absolute;
         font-size: 36px;
@@ -46,15 +45,6 @@
 
         &:hover {
             background-color: @metager-navbar-toggle-hover-background-color;
-            /* 
-            &>.metager-dropdown-menu {
-                animation-name: dropdown-animation;
-                animation-duration: 0.7s;
-                animation-timing-function: ease-out;
-                animation-fill-mode: forwards;
-                animation-delay: 0.1s;
-            }
-            */ 
         }
 
         &>label {
@@ -80,6 +70,10 @@
         text-align: left;
         max-height: 0px;
         overflow: hidden;
+        animation-name: reverse-dropdown-animation;
+        animation-duration: 0.3s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
         &>li>a {
             display: block;
             font-size: 12px;
@@ -132,18 +126,26 @@
         left: 90%;
         margin-top: 8px;
     }
-}
 
-input.sideBarCheckbox {
-    display: none;
-}
+    & input.sideBarCheckbox {
+        display: none;
+
+        &:checked {
+            & ~.metager-dropdown-menu {
+                animation-name: dropdown-animation;
+                animation-duration: 0.7s;
+                animation-timing-function: ease-out;
+                animation-fill-mode: forwards;
+                animation-delay: 0.1s;
+            }
+            & ~ label > .caret {
+                border-top:0 solid;
+                border-bottom:4px solid;
+                transition:border-top .1s, border-bottom .1s .1s;
+            }
+        }
+    }
 
-input.sideBarCheckbox:checked ~ .metager-dropdown-menu {
-    animation-name: dropdown-animation;
-    animation-duration: 0.7s;
-    animation-timing-function: ease-out;
-    animation-fill-mode: forwards;
-    animation-delay: 0.1s;
 }
 
 label#openSidebar {
@@ -161,20 +163,6 @@ label#openSidebar {
     }
 }
 
-@keyframes dropdown-animation {
-    0% {
-        max-height: 0px;
-        padding: 0px 0;
-    }
-    1% {
-        padding: 5px 0;
-    }
-    100% {
-        max-height: 1000px;
-        padding: 5px 0;
-    }
-}
-
 @media (max-width: 979px) {
     .sideBar {
         right: -90%;
@@ -195,4 +183,34 @@ input#nav0:checked {
     & ~.sideBar {
         right: 0px;
     }
-}
\ No newline at end of file
+}
+
+@keyframes dropdown-animation {
+    0% {
+        max-height: 0px;
+        padding: 0px 0;
+    }
+    1% {
+        padding: 5px 0;
+    }
+    100% {
+        max-height: 1000px;
+        padding: 5px 0;
+    }
+}
+
+@keyframes reverse-dropdown-animation {
+    0% {
+        max-height: 1000px;
+        padding: 5px 0;
+    }
+    1% {
+        padding: 5px 0;
+    }
+    100% {
+        max-height: 0px;
+        padding: 0px 0;
+    }
+}
+
+