feat: add compact-mode class for sidebar-mini, header & footer

src/scss/_app-sidebar.scss

@@ -22,16 +22,20 @@
 
 .sidebar-brand {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
   padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
   overflow: hidden;
   font-size: $navbar-brand-font-size;
   white-space: nowrap;
+  height: $lte-app-header-height;
   border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
   @include transition(width $lte-transition-speed $lte-transition-fn);
 
   .brand-link {
-    flex: 1;
+    display: flex;
+    align-items: center;
+
     &:hover {
       text-decoration: none;
     }
@@ -40,9 +44,6 @@
       float: left;
       width: auto;
       max-height: 33px;
-      margin-top: -3px;
-      margin-right: .5rem;
-      margin-left: .8rem;
       line-height: .8;
     }
 
@@ -67,6 +68,7 @@
 
   .brand-text {
     color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
+    margin-left: .5rem;
     @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
     &:hover {
       color: var(--#{$prefix}emphasis-color);
@@ -173,7 +175,7 @@
 
       .nav-arrow {
         @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: none #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
       }
     }
   }
@@ -188,7 +190,7 @@
   .nav-link > .nav-arrow,
   .nav-link > p > .nav-arrow {
     position: absolute;
-    top: .7rem;
+    top: 50%;
     right: 1rem;
   }
 
@@ -203,10 +205,6 @@
       padding-left: .5rem;
       margin: 0;
     }
-
-    .nav-icon {
-      padding-left: .3rem;
-    }
   }
 
   .nav-header {
@@ -228,7 +226,7 @@
 
     > .nav-link {
       .nav-arrow {
-        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
       }
     }
   }
@@ -291,12 +289,22 @@
   .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
+      p {
+        display: inline-block;
+        width: 0;
+        white-space: nowrap;
+      }
+    }
+    .badge,
+    .nav-arrow {
+      display: none;
     }
   }
 
-  .sidebar-menu .nav-link p {
-    width: 0;
-    white-space: nowrap;
+  .brand-text {
+    display: inline-block;
+    max-width: 0;
+    overflow: hidden;
   }
 
   .sidebar-menu .nav-link p,
@@ -338,6 +346,20 @@
       animation-fill-mode: both;
     }
 
+    .brand-text {
+      display: inline;
+      max-width: inherit;
+      overflow: auto;
+      margin-left: .5rem;
+    }
+    .badge,
+    .nav-arrow {
+      display: inherit;
+    }
+
+    .nav-link p {
+      padding-left: inherit;
+    }
     .logo-xs {
       visibility: hidden;
       animation-name: fadeOut;
@@ -371,7 +393,7 @@
             max-height: 100vh;
 
             .sidebar-wrapper {
-              height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
+              height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width));
             }
           }
 
@@ -395,6 +417,13 @@
             .app-footer {
               margin-left: $lte-sidebar-mini-width;
             }
+            &.compact-mode {
+              .app-header,
+              .app-main,
+              .app-footer {
+                margin-left: $lte-sidebar-mini-width-compact;
+              }
+            }
           }
         }
       }
@@ -416,7 +445,7 @@
           margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
+            height: subtract(100vh, add($lte-app-header-height, $lte-app-header-bottom-border-width));
             overflow-x: hidden;
             overflow-y: auto;
           }

src/scss/_compact-mode.scss

@@ -0,0 +1,46 @@
+.compact-mode {
+  .app-header {
+    .nav-link {
+      max-height: $nav-link-height-compact;
+    }
+  }
+
+  .nav-link {
+    --bs-nav-link-padding-y: .25rem;
+    --bs-nav-link-padding-x: .5rem;
+  }
+
+  &.sidebar-mini.sidebar-collapse {
+    .app-sidebar:not(:hover) {
+      min-width: $lte-sidebar-mini-width-compact;
+      max-width: $lte-sidebar-mini-width-compact;
+
+      .sidebar-menu {
+        .nav-link {
+          width: $lte-sidebar-mini-width-compact - $lte-sidebar-padding-x * 2 !important;
+        }
+      }
+    }
+  }
+
+  .logo-xs,
+  .logo-xl {
+    max-height: $lte-app-header-height-compact;
+  }
+
+  .brand-image {
+    height: $nav-link-height-compact;
+    width: $nav-link-height-compact;
+  }
+  .sidebar-brand {
+    height: $lte-app-header-height-compact;
+  }
+  .app-header {
+    max-height: $lte-app-header-height-compact;
+  }
+
+  .app-footer {
+    padding: $lte-app-footer-padding-compact;
+  }
+}
+

src/scss/_variables.scss

@@ -15,7 +15,9 @@ $lte-transition-fn:               ease-in-out !default;
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
+$lte-sidebar-padding-x-compact:   .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
+$lte-sidebar-padding-y-compact:   .25rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -40,17 +42,21 @@ $lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
+$nav-link-padding-x-compact:      .25rem !default;
 $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
+$lte-sidebar-mini-width-compact:  ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
+$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
 
 // MAIN HEADER
 // --------------------------------------------------------
+$nav-link-height-compact:             1.75rem !default;
 $lte-app-header-bottom-border-width:  $border-width !default;
 $lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
 $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
-$lte-app-header-height-inner:         ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
@@ -59,6 +65,7 @@ $lte-content-padding-x:           .5rem !default;
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;
+$lte-app-footer-padding-compact:   0.5rem !default;
 $lte-app-footer-border-top-width:  1px !default;
 $lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
@@ -67,8 +74,12 @@ $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
-$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
-$lte-brand-link-padding-x:        $lte-sidebar-padding-x !default;
+$navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
+$navbar-padding-y-compact:         $navbar-padding-y * .5 !default;
+$lte-brand-link-padding-y:         $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
+$lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
+$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
 

src/scss/mixins/_animations.scss

@@ -29,7 +29,6 @@
   }
 }
 
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -47,6 +46,8 @@
 
   to {
     opacity: 0;
+    padding-left: 0;
+    margin-left: 0;
   }
 }
 

src/scss/parts/_core.scss

@@ -10,4 +10,5 @@
 @import "../app-footer";
 @import "../dropdown";
 @import "../callouts";
+@import "../compact-mode";
 @import "../docs";