rework sidebar & sidebar-mini

- add sidebar-mini-xs
- fixed sidebar-mini with nav-sidebar custom classes

build/scss/_layout.scss

@@ -71,7 +71,8 @@ body,
   }
 
   .layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
-  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse & {
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse &,
+  .layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse & {
     .brand-link {
       height: $main-header-height;
       width: $sidebar-mini-width;
@@ -83,7 +84,8 @@ body,
   }
 
   .layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
-  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm & {
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm &,
+  .layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse.text-sm & {
     .brand-link {
       height: $main-header-height-sm;
     }
@@ -421,7 +423,7 @@ body,
 }
 
 
-body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
+body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) {
   .content-wrapper,
   .main-footer,
   .main-header {
@@ -432,7 +434,7 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
   }
 }
 
-body:not(.sidebar-mini-md) {
+body:not(.sidebar-mini-md):not(.sidebar-mini-xs) {
   .content-wrapper,
   .main-footer,
   .main-header {
@@ -478,6 +480,20 @@ body:not(.sidebar-mini-md) {
   }
 }
 
+.sidebar-mini-xs {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include transition(margin-left $transition-speed $transition-fn);
+
+    margin-left: $sidebar-width;
+
+    .sidebar-collapse & {
+      margin-left: $sidebar-mini-width;
+    }
+  }
+}
+
 .content-wrapper {
   background-color: $main-bg;
 
@@ -494,7 +510,7 @@ body:not(.sidebar-mini-md) {
     width: $sidebar-width;
   }
 
-  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) & {
     &,
     &::before {
       box-shadow: none !important;

build/scss/_main-sidebar.scss

@@ -486,10 +486,13 @@
 
 .sidebar-mini .main-sidebar:not(.sidebar-no-expand),
 .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand),
 .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
 .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand):hover,
 .sidebar-mini .main-sidebar.sidebar-focused,
-.sidebar-mini-md .main-sidebar.sidebar-focused {
+.sidebar-mini-md .main-sidebar.sidebar-focused,
+.sidebar-mini-xs .main-sidebar.sidebar-focused {
   .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
     padding-left: 1rem;
     margin-left: -.5rem;
@@ -597,8 +600,10 @@
 
   .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
   .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand):hover &,
   .sidebar-mini .main-sidebar.sidebar-focused &,
-  .sidebar-mini-md .main-sidebar.sidebar-focused & {
+  .sidebar-mini-md .main-sidebar.sidebar-focused &,
+  .sidebar-mini-xs .main-sidebar.sidebar-focused & {
     &.nav-compact.nav-sidebar .nav-treeview {
       .nav-icon {
         margin-left: .4rem;
@@ -707,11 +712,13 @@
   }
 
   .sidebar-mini &,
-  .sidebar-mini-md & {
+  .sidebar-mini-md &,
+  .sidebar-mini-xs & {
     > .nav-item .nav-link {
       .nav-icon {
         @include transition(margin-left $transition-fn $transition-speed);
-        margin-left: .75rem;
+        margin-left: .6rem;
+
       }
     }
   }
@@ -719,7 +726,9 @@
   .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
   .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
   .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-xs.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
     .nav-treeview {
       padding-left: 1rem;
 
@@ -733,7 +742,9 @@
   .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
   .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
   .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
+  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
     .nav-treeview {
       padding-left: .5rem;
 
@@ -745,7 +756,8 @@
   }
 
   .sidebar-mini.sidebar-collapse &,
-  .sidebar-mini-md.sidebar-collapse & {
+  .sidebar-mini-md.sidebar-collapse &,
+  .sidebar-mini-xs.sidebar-collapse & {
     > .nav-item > .nav-link {
       .nav-icon {
         margin-left: .55rem;
@@ -770,7 +782,8 @@
 
 
   .sidebar-mini.sidebar-collapse.text-sm &,
-  .sidebar-mini-md.sidebar-collapse.text-sm & {
+  .sidebar-mini-md.sidebar-collapse.text-sm &,
+  .sidebar-mini-xs.sidebar-collapse.text-sm & {
     > .nav-item > .nav-link {
       .nav-icon {
         margin-left: .75rem;
@@ -850,7 +863,9 @@
   .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
   .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
   .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
     .menu-open > .nav-treeview {
       max-height: min-content;
       animation-name: fadeIn;
@@ -974,7 +989,7 @@
 }
 
 // Sidebar Collapse on Layout Boxed
-.layout-boxed:not(.sidebar-mini):not(.sidebar-mini-md) {
+.layout-boxed:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) {
   &.sidebar-collapse .main-sidebar {
     margin-left: 0;
   }

build/scss/_sidebar-mini.scss

@@ -61,6 +61,12 @@
   }
 }
 
+.sidebar-mini-xs {
+  @include media-breakpoint-up(xs) {
+    @include sidebar-mini-breakpoint ();
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -81,61 +87,385 @@
   }
 }
 
-.sidebar-collapse {
-  .main-sidebar.sidebar-focused,
-  .main-sidebar:hover {
-    .nav-header {
-      display: inline-block;
-    }
-  }
+.sidebar-mini,
+.sidebar-mini-md,
+.sidebar-mini-xs {
+  .main-sidebar {
+    .nav-child-indent .nav-treeview {
+      .nav-link {
+        width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
+      }
 
-  .sidebar-no-expand.main-sidebar.sidebar-focused,
-  .sidebar-no-expand.main-sidebar:hover {
-    width: $sidebar-mini-width;
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
+        }
 
-    .nav-header {
-      display: none;
-    }
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 3rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 4rem);
+            }
 
-    .brand-link {
-      width: $sidebar-mini-width !important;
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 5rem);
+              }
+            }
+          }
+        }
+      }
     }
+    .nav-legacy {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      &.nav-child-indent {
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - 1rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - 1rem - 1rem);
+            }
 
-    .user-panel .image {
-      float: none !important;
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - 1rem - 2rem);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - 1rem - 3rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - 1rem - 4rem);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
+    .nav-flat {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      &.nav-child-indent {
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width});
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .2rem);
+            }
 
-    .logo-xs {
-      animation-name: fadeIn;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
-      visibility: visible;
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .2rem * 2);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .2rem * 3);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .2rem * 4);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
+    .nav-child-indent.nav-compact .nav-treeview {
+      .nav-link {
+        width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - .5rem);
+      }
+
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
+        }
 
-    .logo-xl {
-      animation-name: fadeOut;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
-      visibility: hidden;
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1.5rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2.5rem);
+              }
+            }
+          }
+        }
+      }
     }
+    .nav-child-indent.nav-legacy.nav-compact {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - .5rem);
+        }
+
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - .5rem * 2);
+          }
 
-    .nav-sidebar.nav-child-indent .nav-treeview {
-      padding-left: 0;
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .5rem * 3);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .5rem * 4);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .5rem * 5);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-link {
+      width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+      @include transition(width $transition-fn $transition-speed);
     }
+  }
+}
 
-    .brand-text,
-    .user-panel > .info,
-    .nav-sidebar .nav-link p {
-      margin-left: -10px;
-      animation-name: fadeOut;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
-      visibility: hidden;
-      width: 0;
+.sidebar-collapse {
+  &.sidebar-mini,
+  &.sidebar-mini-md,
+  &.sidebar-mini-xs {
+    .main-sidebar {
+      .nav-sidebar {
+        .nav-link {
+          width: $sidebar-mini-width - $sidebar-padding-x * 2;
+        }
+
+        &.nav-flat,
+        &.nav-legacy {
+          .nav-link {
+            width: $sidebar-mini-width;
+          }
+        }
+        &.nav-child-indent.nav-compact {
+          .nav-treeview {
+            padding-left: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .nav-link {
+            width: calc(#{$sidebar-mini-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+      }
+
+      &.sidebar-focused,
+      &:hover {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+        }
+        .nav-header {
+          display: inline-block;
+        }
+
+        .nav-child-indent {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+        .nav-legacy {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          &.nav-child-indent {
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - 1rem);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - 1rem - 1rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - 1rem - 2rem);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - 1rem - 3rem);
+                    }
+
+                    .nav-treeview {
+                      .nav-link {
+                        width: calc(#{$sidebar-width} - 1rem - 4rem);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .nav-flat {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          &.nav-child-indent {
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width});
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .2rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .2rem * 2);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - .2rem * 3);
+                    }
+
+                    .nav-treeview {
+                      .nav-link {
+                        width: calc(#{$sidebar-width} - .2rem * 4);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .nav-child-indent.nav-compact {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+        .nav-child-indent.nav-legacy.nav-compact {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .5rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .5rem * 2);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .5rem * 3);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .5rem * 4);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - .5rem * 5);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
 
-    .nav-sidebar > .nav-item .nav-icon {
-      margin-right: 0;
+    .sidebar-no-expand.main-sidebar.sidebar-focused,
+    .sidebar-no-expand.main-sidebar:hover {
+      width: $sidebar-mini-width;
+
+      .nav-header {
+        display: none;
+      }
+
+      .brand-link {
+        width: $sidebar-mini-width !important;
+      }
+
+      .user-panel .image {
+        float: none !important;
+      }
+
+      .logo-xs {
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: visible;
+      }
+
+      .logo-xl {
+        animation-name: fadeOut;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: hidden;
+      }
+
+      .nav-sidebar.nav-child-indent .nav-treeview {
+        padding-left: 0;
+      }
+
+      .brand-text,
+      .user-panel > .info,
+      .nav-sidebar .nav-link p {
+        margin-left: -10px;
+        animation-name: fadeOut;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: hidden;
+        width: 0;
+      }
+
+      .nav-sidebar > .nav-item .nav-icon {
+        margin-right: 0;
+      }
     }
   }
 }