fix(4186): various collapsed sidebar-mini bugs

build/scss/_main-sidebar.scss

@@ -862,7 +862,7 @@
     animation-fill-mode: both;
   }
 
-  .sidebar-collapse .sidebar & {
+  .sidebar-collapse .sidebar:not(:hover) & {
     .menu-open > .nav-treeview {
       max-height: 0;
       animation-name: fadeOut;

build/scss/_sidebar-mini.scss

@@ -278,9 +278,6 @@
 
       &.sidebar-focused,
       &:hover {
-        .nav-link {
-          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
-        }
         &:not(.hide-nav-header-on-hover) {
           .nav-header {
             display: inline-block;
@@ -289,6 +286,9 @@
 
         // Show sidebar search when hover/focus on the sidebar mini mode.
         &:not(.sidebar-no-expand) {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
           .form-control-sidebar {
             display: inline-block;
           }
@@ -462,6 +462,7 @@
           animation-duration: $transition-speed;
           animation-fill-mode: both;
           visibility: hidden;
+          display: inline-block;
           width: 0;
         }
 

build/scss/mixins/_sidebar.scss

@@ -92,55 +92,57 @@
         }
       }
 
-      &:hover,
-      &.sidebar-focused {
-        width: $sidebar-width;
-
-        .brand-link {
+      &:not(.sidebar-no-expand) {
+        &:hover,
+        &.sidebar-focused {
           width: $sidebar-width;
-        }
 
-        .user-panel {
-          text-align: left;
+          .brand-link {
+            width: $sidebar-width;
+          }
+
+          .user-panel {
+            text-align: left;
 
-          .image {
-            float: left;
+            .image {
+              float: left;
+            }
           }
-        }
 
-        .user-panel > .info,
-        .sidebar .nav-sidebar .nav-link p,
-        .brand-text,
-        .logo-xl {
-          display: inline-block;
-          margin-left: 0;
-          animation-name: fadeIn;
-          animation-duration: $transition-speed;
-          animation-fill-mode: both;
-          visibility: visible;
-        }
+          .user-panel > .info,
+          .sidebar .nav-sidebar .nav-link p,
+          .brand-text,
+          .logo-xl {
+            display: inline-block;
+            margin-left: 0;
+            animation-name: fadeIn;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: visible;
+          }
 
-        .logo-xs {
-          animation-name: fadeOut;
-          animation-duration: $transition-speed;
-          animation-fill-mode: both;
-          visibility: hidden;
-        }
+          .logo-xs {
+            animation-name: fadeOut;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: hidden;
+          }
 
-        .brand-image {
-          margin-right: .5rem;
-        }
+          .brand-image {
+            margin-right: .5rem;
+          }
 
-        // Make the sidebar links, menus, labels, badges
-        // and angle icons disappear
-        .sidebar-form,
-        .user-panel > .info {
-          display: block !important;
-          transform: translateZ(0);
-        }
+          // Make the sidebar links, menus, labels, badges
+          // and angle icons disappear
+          .sidebar-form,
+          .user-panel > .info {
+            display: block !important;
+            transform: translateZ(0);
+          }
 
-        .nav-sidebar > .nav-item > .nav-link > span {
-          display: inline-block !important;
+          .nav-sidebar > .nav-item > .nav-link > span {
+            display: inline-block !important;
+          }
         }
       }
     }