From 4d1b7c9eca887a86aadc91465374cc3bf1bb6b7a Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Tue, 28 Feb 2023 18:43:10 +0530
Subject: [PATCH] added sidebar-expand

---
 src/html/components/dashboard/_sidenav.astro |   3 +-
 src/html/components/dashboard/_topbar.astro  |   2 +-
 src/html/pages/UI/timeline.astro             |   2 +-
 src/html/pages/forms/general.astro           |   2 +-
 src/html/pages/index.astro                   |   2 +-
 src/html/pages/index2.astro                  |   2 +-
 src/html/pages/index3.astro                  |   2 +-
 src/html/pages/layout/fixed-sidebar.astro    |   2 +-
 src/html/pages/layout/layout-rtl.astro       |   2 +-
 src/html/pages/layout/sidebar-mini.astro     |   2 +-
 src/html/pages/layout/unfixed-sidebar.astro  |   2 +-
 src/html/pages/tables/simple.astro           |   2 +-
 src/html/pages/widgets/cards.astro           |   2 +-
 src/html/pages/widgets/info-box.astro        |   2 +-
 src/html/pages/widgets/small-box.astro       |   2 +-
 src/scss/_app-footer.scss                    |   1 +
 src/scss/_app-header.scss                    |   1 +
 src/scss/_app-main.scss                      |   1 +
 src/scss/_app-sidebar.scss                   | 222 ++++++++++++++++++-
 src/scss/_app-wrapper.scss                   |   5 +-
 src/scss/_layout-fixed.scss                  |  39 ----
 src/scss/_layout-mobile.scss                 |  23 --
 src/scss/_sidebar-brand.scss                 |  56 -----
 src/scss/_sidebar-close.scss                 |   6 -
 src/scss/_sidebar-collapse.scss              |  73 ------
 src/scss/_variables.scss                     |   3 +-
 src/scss/parts/_core.scss                    |   5 -
 src/ts/direct-chat.ts                        |   6 +-
 src/ts/layout.ts                             |  10 +-
 src/ts/push-menu.ts                          | 168 ++++++--------
 30 files changed, 313 insertions(+), 337 deletions(-)
 delete mode 100644 src/scss/_layout-fixed.scss
 delete mode 100644 src/scss/_layout-mobile.scss
 delete mode 100644 src/scss/_sidebar-brand.scss
 delete mode 100644 src/scss/_sidebar-close.scss
 delete mode 100644 src/scss/_sidebar-collapse.scss

diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
index a868c7718..f85ffa682 100644
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -10,7 +10,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
       <img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
-    <a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
   </div>
   <!-- Sidebar -->
   <div class="sidebar-wrapper">
@@ -81,7 +80,7 @@ const htmlPath = (path != undefined) ? '.' : '..'
             <i class="nav-icon fa-solid fa-copy"></i>
             <p>
               Layout Options
-              <span class="badge text-bg-primary float-end me-3">6</span>
+              <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
               <i class="nav-arrow fa-solid fa-angle-right"></i>
             </p>
           </a>
diff --git a/src/html/components/dashboard/_topbar.astro b/src/html/components/dashboard/_topbar.astro
index 7662deeea..3054085c4 100644
--- a/src/html/components/dashboard/_topbar.astro
+++ b/src/html/components/dashboard/_topbar.astro
@@ -8,7 +8,7 @@ const distPath = (path != undefined) ? path : '../../../dist'
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
diff --git a/src/html/pages/UI/timeline.astro b/src/html/pages/UI/timeline.astro
index 7187892e9..ce9ba57ec 100644
--- a/src/html/pages/UI/timeline.astro
+++ b/src/html/pages/UI/timeline.astro
@@ -14,7 +14,7 @@ const page = 'timeline'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro
index 48065433f..ab1f3f81d 100644
--- a/src/html/pages/forms/general.astro
+++ b/src/html/pages/forms/general.astro
@@ -14,7 +14,7 @@ const page = 'general'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/index.astro b/src/html/pages/index.astro
index dd918a249..2d24037eb 100644
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -17,7 +17,7 @@ const page = 'index'
     <Head title={title} path={path} />
   </head>
 
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
diff --git a/src/html/pages/index2.astro b/src/html/pages/index2.astro
index 0588afea8..00f12f6b3 100644
--- a/src/html/pages/index2.astro
+++ b/src/html/pages/index2.astro
@@ -16,7 +16,7 @@ const page = 'index2'
     <Head title={title} path={path} />
   </head>
 
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
diff --git a/src/html/pages/index3.astro b/src/html/pages/index3.astro
index cf262e815..f81f24f05 100644
--- a/src/html/pages/index3.astro
+++ b/src/html/pages/index3.astro
@@ -16,7 +16,7 @@ const page = 'index3'
     <Head title={title} path={path} />
   </head>
 
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
diff --git a/src/html/pages/layout/fixed-sidebar.astro b/src/html/pages/layout/fixed-sidebar.astro
index 989b1930c..7c8e48503 100644
--- a/src/html/pages/layout/fixed-sidebar.astro
+++ b/src/html/pages/layout/fixed-sidebar.astro
@@ -14,7 +14,7 @@ const page = 'fixed-sidebar'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/layout/layout-rtl.astro b/src/html/pages/layout/layout-rtl.astro
index 789067739..2ef196d7e 100644
--- a/src/html/pages/layout/layout-rtl.astro
+++ b/src/html/pages/layout/layout-rtl.astro
@@ -15,7 +15,7 @@ const isRtl = true
   <head>
     <Head title={title} isRtl={isRtl} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/layout/sidebar-mini.astro b/src/html/pages/layout/sidebar-mini.astro
index f0ed91fc2..300e96d8e 100644
--- a/src/html/pages/layout/sidebar-mini.astro
+++ b/src/html/pages/layout/sidebar-mini.astro
@@ -14,7 +14,7 @@ const page = 'sidebar-mini'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
+  <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/layout/unfixed-sidebar.astro b/src/html/pages/layout/unfixed-sidebar.astro
index 7a0f233d4..94424851e 100644
--- a/src/html/pages/layout/unfixed-sidebar.astro
+++ b/src/html/pages/layout/unfixed-sidebar.astro
@@ -14,7 +14,7 @@ const page = 'unfixed-sidebar'
   <head>
     <Head title={title} />
   </head>
-  <body class="bg-body-tertiary">
+  <body class="sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/tables/simple.astro b/src/html/pages/tables/simple.astro
index 4ed9dc911..1463242ec 100644
--- a/src/html/pages/tables/simple.astro
+++ b/src/html/pages/tables/simple.astro
@@ -14,7 +14,7 @@ const page = 'simple'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/widgets/cards.astro b/src/html/pages/widgets/cards.astro
index d19a51279..af34b405d 100644
--- a/src/html/pages/widgets/cards.astro
+++ b/src/html/pages/widgets/cards.astro
@@ -14,7 +14,7 @@ const page = 'cards'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/widgets/info-box.astro b/src/html/pages/widgets/info-box.astro
index 015b4811e..f3e917bd8 100644
--- a/src/html/pages/widgets/info-box.astro
+++ b/src/html/pages/widgets/info-box.astro
@@ -14,7 +14,7 @@ const page = 'info-box'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/html/pages/widgets/small-box.astro b/src/html/pages/widgets/small-box.astro
index 11348e0d3..282f376d4 100644
--- a/src/html/pages/widgets/small-box.astro
+++ b/src/html/pages/widgets/small-box.astro
@@ -14,7 +14,7 @@ const page = 'small-box'
   <head>
     <Head title={title} />
   </head>
-  <body class="layout-fixed bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
     <div class="app-wrapper">
       <Topbar />
       <Sidenav mainPage={mainPage} page={page} />
diff --git a/src/scss/_app-footer.scss b/src/scss/_app-footer.scss
index 03125fc1c..f9e053404 100644
--- a/src/scss/_app-footer.scss
+++ b/src/scss/_app-footer.scss
@@ -10,5 +10,6 @@
   color: $lte-app-footer-color;
   background-color: $lte-app-footer-bg;
   border-top: $lte-app-footer-border-top;
+  @include transition($lte-transition-speed $lte-transition-fn);
 }
 
diff --git a/src/scss/_app-header.scss b/src/scss/_app-header.scss
index ea750f99d..ab28d7111 100644
--- a/src/scss/_app-header.scss
+++ b/src/scss/_app-header.scss
@@ -7,6 +7,7 @@
   grid-area: #{$lte-prefix}app-header;
   max-width: 100vw;
   border-bottom: $lte-app-header-bottom-border;
+  @include transition($lte-transition-speed $lte-transition-fn);
 
   .nav-link {
     position: relative;
diff --git a/src/scss/_app-main.scss b/src/scss/_app-main.scss
index 4343d955c..886707506 100644
--- a/src/scss/_app-main.scss
+++ b/src/scss/_app-main.scss
@@ -2,6 +2,7 @@
   grid-area: #{$lte-prefix}app-main;
   max-width: 100vw;
   padding-bottom: 1rem;
+  @include transition($lte-transition-speed $lte-transition-fn);
 
   .app-content-header {
     padding: 1rem $lte-content-padding-x;
diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss
index fe521274c..9ae96e648 100644
--- a/src/scss/_app-sidebar.scss
+++ b/src/scss/_app-sidebar.scss
@@ -20,6 +20,42 @@
   @include transition($lte-sidebar-transition);
 }
 
+.sidebar-brand {
+  display: flex;
+  justify-content: space-between;
+  padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
+  overflow: hidden;
+  font-size: $navbar-brand-font-size;
+  white-space: nowrap;
+  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;
+    &:hover {
+      text-decoration: none;
+    }
+
+    .brand-image {
+      float: left;
+      width: auto;
+      max-height: 33px;
+      margin-top: -3px;
+      margin-right: .5rem;
+      margin-left: .8rem;
+      line-height: .8;
+    }
+  }
+
+  .brand-text {
+    color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
+    @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
+    &:hover {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+}
+
 .sidebar-wrapper {
   padding-top: $lte-sidebar-padding-y;
   padding-right: $lte-sidebar-padding-x;
@@ -119,6 +155,12 @@
   }
 
   // All levels
+  .nav-link > .nav-badge,
+  .nav-link > p > .nav-badge {
+    position: absolute;
+    right: 1rem;
+  }
+
   .nav-link > .nav-arrow,
   .nav-link > p > .nav-arrow {
     position: absolute;
@@ -168,10 +210,186 @@
   }
 }
 
-.hold-transition {
+// A fix for text overflow while transitioning from sidebar mini to full sidebar
+.sidebar-menu,
+.sidebar-menu > .nav-header,
+.sidebar-menu .nav-link {
+  white-space: nowrap;
+}
+
+.sidebar-mini.sidebar-collapse {
   .app-sidebar {
+    min-width: $lte-sidebar-mini-width;
+    max-width: $lte-sidebar-mini-width;
+  }
+
+  // Make the sidebar headers
+  .sidebar-menu .nav-header {
+    display: none;
+  }
+
+  .sidebar-menu {
+    .nav-link {
+      width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
+    }
+  }
+
+  .sidebar-menu .nav-link p {
+    width: 0;
+    white-space: nowrap;
+  }
+
+  .sidebar-menu .nav-link p,
+  .brand-text {
+    visibility: hidden;
+    animation-name: fadeOut;
+    animation-fill-mode: both;
+  }
+
+  &.sidebar-is-hover {
+    .app-sidebar {
+      min-width: var(--#{$lte-prefix}sidebar-width);
+      max-width: var(--#{$lte-prefix}sidebar-width);
+    }
+
+    .sidebar-menu .nav-header {
+      display: inline-block;
+    }
+
+    .sidebar-menu .nav-link {
+      width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
+    }
+
+    .sidebar-menu .nav-link p,
+    .brand-text {
+      margin-left: 0;
+      visibility: visible;
+      animation-name: fadeIn;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
+
+  .sidebar-expand#{$infix} {
+    @include media-breakpoint-up($next) {
+      &.layout-fixed {
+        .app-sidebar {
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          max-height: 100vh;
+
+          .sidebar-wrapper {
+            height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
+          }
+        }
+
+        .app-header,
+        .app-main,
+        .app-footer {
+          margin-left: var(--#{$lte-prefix}sidebar-width);
+        }
+
+        &.sidebar-mini.sidebar-collapse {
+          .app-header,
+          .app-main,
+          .app-footer {
+            margin-left: $lte-sidebar-mini-width;
+          }
+        }
+
+        &.sidebar-collapse {
+          .app-header,
+          .app-main,
+          .app-footer {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    @include media-breakpoint-down($next) {
+      $max: breakpoint-max($next);
+
+      &::before {
+        display: none;
+        content: "#{$max}";
+      }
+
+      .app-sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        max-height: 100vh;
+        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));
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+      }
+
+      &.sidebar-open {
+        .app-sidebar {
+          margin-left: 0;
+        }
+
+        .sidebar-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: $lte-zindex-sidebar-overlay;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, .2);
+          animation-name: fadeIn;
+          animation-fill-mode: both;
+        }
+      }
+    }
+  }
+}
+
+.sidebar-collapse:not(.sidebar-mini) {
+  .app-sidebar {
+    // stylelint-disable-next-line
+    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
+  }
+}
+
+// To prevent onload transition and animation
+.app-loaded {
+  &.sidebar-mini.sidebar-collapse {
+    .sidebar-menu .nav-link p,
+    .brand-text {
+      animation-duration: $lte-transition-speed;
+    }
+  }
+}
+body:not(.app-loaded) {
+  .app-header,
+  .app-sidebar,
+  .app-main,
+  .app-footer {
     @include transition(none !important);
-    animation: none !important;
+    animation-duration: 0s !important;
+  }
+}
+.hold-transition {
+  .app-header,
+  .app-sidebar,
+  .app-main,
+  .app-footer {
+    @include transition(none !important);
+    animation-duration: 0s !important;
   }
 }
 
diff --git a/src/scss/_app-wrapper.scss b/src/scss/_app-wrapper.scss
index eb88b5d9a..be8eb8358 100644
--- a/src/scss/_app-wrapper.scss
+++ b/src/scss/_app-wrapper.scss
@@ -10,13 +10,10 @@
     "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
     "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
   grid-template-rows: min-content 1fr min-content;
+  grid-template-columns: auto 1fr;
   grid-gap: 0;
   align-content: stretch;
   align-items: stretch;
   max-width: 100vw;
   min-height: 100vh;
 }
-
-:not(.layout-mobile) .app-wrapper {
-  grid-template-columns: auto 1fr;
-}
diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss
deleted file mode 100644
index 9f6a67408..000000000
--- a/src/scss/_layout-fixed.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@include media-breakpoint-up($lte-sidebar-breakpoint) {
-  .layout-fixed {
-    .app-sidebar {
-      position: fixed;
-      top: auto;
-      bottom: 0;
-      left: 0;
-      float: none;
-      max-height: 100vh;
-
-      .sidebar-wrapper {
-        height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
-      }
-    }
-
-    .app-header,
-    .app-main,
-    .app-footer {
-      margin-left: var(--#{$lte-prefix}sidebar-width);
-      @include transition($lte-transition-speed $lte-transition-fn);
-    }
-
-    &.sidebar-collapse {
-      .app-header,
-      .app-main,
-      .app-footer {
-        margin-left: $lte-sidebar-mini-width;
-      }
-    }
-
-    &.sidebar-close {
-      .app-header,
-      .app-main,
-      .app-footer {
-        margin-left: 0;
-      }
-    }
-  }
-}
diff --git a/src/scss/_layout-mobile.scss b/src/scss/_layout-mobile.scss
deleted file mode 100644
index ff4097c63..000000000
--- a/src/scss/_layout-mobile.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@include media-breakpoint-down($lte-sidebar-breakpoint) {
-  .app-wrapper {
-    .app-sidebar {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      max-height: 100vh;
-      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));
-        overflow-x: hidden;
-        overflow-y: auto;
-      }
-    }
-  }
-
-  .sidebar-open {
-    .app-sidebar {
-      margin-left: 0;
-    }
-  }
-}
diff --git a/src/scss/_sidebar-brand.scss b/src/scss/_sidebar-brand.scss
deleted file mode 100644
index 201338808..000000000
--- a/src/scss/_sidebar-brand.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-//
-// Core: Brand
-//
-
-.sidebar-brand {
-  display: flex;
-  justify-content: space-between;
-  padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
-  overflow: hidden;
-  font-size: $navbar-brand-font-size;
-  white-space: nowrap;
-  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;
-    &:hover {
-      text-decoration: none;
-    }
-
-    .brand-image {
-      float: left;
-      width: auto;
-      max-height: 33px;
-      margin-top: -3px;
-      margin-right: .5rem;
-      margin-left: .8rem;
-      line-height: .8;
-    }
-  }
-
-  .pushmenu {
-    flex: 0;
-    margin-left: auto;
-  }
-
-  .brand-link,
-  .pushmenu {
-    color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
-    @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
-    &:hover {
-      color: var(--#{$prefix}emphasis-color);
-    }
-  }
-}
-
-.sidebar-collapse:not(.sidebar-is-hover) {
-  .sidebar-brand {
-    .brand-link {
-      width: 0;
-    }
-    .pushmenu {
-      flex: auto;
-    }
-  }
-}
diff --git a/src/scss/_sidebar-close.scss b/src/scss/_sidebar-close.scss
deleted file mode 100644
index 1a4b2c1dd..000000000
--- a/src/scss/_sidebar-close.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.sidebar-close {
-  .app-sidebar {
-    // stylelint-disable-next-line
-    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
-  }
-}
diff --git a/src/scss/_sidebar-collapse.scss b/src/scss/_sidebar-collapse.scss
deleted file mode 100644
index ebb01f842..000000000
--- a/src/scss/_sidebar-collapse.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-//
-// Core: Sidebar Mini
-//
-
-// A fix for text overflow while transitioning from sidebar mini to full sidebar
-.sidebar-menu,
-.sidebar-menu > .nav-header,
-.sidebar-menu .nav-link {
-  white-space: nowrap;
-}
-
-.sidebar-collapse {
-  .app-sidebar {
-    min-width: $lte-sidebar-mini-width;
-    max-width: $lte-sidebar-mini-width;
-  }
-
-  // Make the sidebar headers
-  .sidebar-menu .nav-header {
-    display: none;
-  }
-
-  .sidebar-menu {
-    .nav-link {
-      width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
-    }
-  }
-
-  .sidebar-menu .nav-link p {
-    width: 0;
-    white-space: nowrap;
-  }
-
-  .sidebar-menu .nav-link p,
-  .brand-link {
-    animation-name: fadeOut;
-    animation-duration: $lte-transition-speed;
-    animation-fill-mode: both;
-  }
-
-  &.sidebar-is-hover {
-    .app-sidebar {
-      min-width: var(--#{$lte-prefix}sidebar-width);
-      max-width: var(--#{$lte-prefix}sidebar-width);
-    }
-
-    .sidebar-menu .nav-header {
-      display: inline-block;
-    }
-
-    .sidebar-menu .nav-link {
-      width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
-    }
-
-    .sidebar-menu .nav-link p,
-    .brand-link {
-      margin-left: 0;
-      visibility: visible;
-      animation-name: fadeIn;
-      animation-duration: $lte-transition-speed;
-      animation-fill-mode: both;
-    }
-  }
-
-  &:not(.sidebar-is-hover) {
-    .sidebar-menu .nav-link p {
-      .float-end {
-        // clear: both;
-        float: none !important;
-      }
-    }
-  }
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 98bf4e511..4d07bd024 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -91,4 +91,5 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
 // Z-INDEX
 // --------------------------------------------------------
 $lte-zindex-app-header:          $zindex-fixed + 4 !default;
-$lte-zindex-sidebar:              $zindex-fixed + 8 !default;
+$lte-zindex-sidebar:             $zindex-fixed + 8 !default;
+$lte-zindex-sidebar-overlay:     $lte-zindex-sidebar - 1 !default;
diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss
index 83d67bc27..57dd0e87d 100644
--- a/src/scss/parts/_core.scss
+++ b/src/scss/parts/_core.scss
@@ -6,11 +6,6 @@
 @import "../app-wrapper";
 @import "../app-header";
 @import "../app-sidebar";
-@import "../sidebar-brand";
-@import "../sidebar-collapse";
-@import "../sidebar-close";
 @import "../app-main";
 @import "../app-footer";
-@import "../layout-fixed";
-@import "../layout-mobile";
 @import "../dropdown";
diff --git a/src/ts/direct-chat.ts b/src/ts/direct-chat.ts
index 399e8638f..26a2a0393 100644
--- a/src/ts/direct-chat.ts
+++ b/src/ts/direct-chat.ts
@@ -31,10 +31,8 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
 
 class DirectChat {
   _element: HTMLElement
-  _config: undefined
-  constructor(element: HTMLElement, config: undefined) {
+  constructor(element: HTMLElement) {
     this._element = element
-    this._config = config
   }
 
   toggle(): void {
@@ -70,7 +68,7 @@ domReady(() => {
       const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
 
       if (chatPane) {
-        const data = new DirectChat(chatPane, undefined)
+        const data = new DirectChat(chatPane)
         data.toggle()
       }
     })
diff --git a/src/ts/layout.ts b/src/ts/layout.ts
index e5cf56b19..31326c478 100644
--- a/src/ts/layout.ts
+++ b/src/ts/layout.ts
@@ -16,6 +16,7 @@ import {
  */
 
 const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
+const CLASS_NAME_APP_LOADED = 'app-loaded'
 
 /**
  * Class Definition
@@ -24,11 +25,9 @@ const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
 
 class Layout {
   _element: HTMLElement
-  _config: undefined
 
-  constructor(element: HTMLElement, config: undefined) {
+  constructor(element: HTMLElement) {
     this._element = element
-    this._config = config as unknown as undefined
   }
 
   holdTransition(): void {
@@ -44,8 +43,11 @@ class Layout {
 }
 
 domReady(() => {
-  const data = new Layout(document.body, undefined)
+  const data = new Layout(document.body)
   data.holdTransition()
+  setTimeout(() => {
+    document.body.classList.add(CLASS_NAME_APP_LOADED)
+  }, 400)
 })
 
 export default Layout
diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts
index b272fbd88..8f5a11d0b 100644
--- a/src/ts/push-menu.ts
+++ b/src/ts/push-menu.ts
@@ -20,27 +20,29 @@ const EVENT_KEY = `.${DATA_KEY}`
 
 const EVENT_OPEN = `open${EVENT_KEY}`
 const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
-const EVENT_CLOSE = `close${EVENT_KEY}`
 
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
-const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
 const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
+const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
+const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
-const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
 
 const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
 const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
-const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
-const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
-const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
-const SELECTOR_APP_MAIN = '.app-main'
+const SELECTOR_APP_WRAPPER = '.app-wrapper'
+const SELECTOR_SIDEBAR_EXPAND = `[class*="${CLASS_NAME_SIDEBAR_EXPAND}"]`
+const SELECTOR_SIDEBAR_TOGGLE = '[data-lte-toggle="sidebar"]'
+
+type Config = {
+  sidebarBreakpoint: number;
+}
 
 const Defaults = {
-  onLayoutMobile: 992
+  sidebarBreakpoint: 992
 }
 
 /**
@@ -49,20 +51,16 @@ const Defaults = {
  */
 
 class PushMenu {
-  _element: HTMLElement | undefined
-  _config: undefined
-  _bodyClass: DOMTokenList
-  constructor(element: HTMLElement | undefined, config: undefined) {
+  _element: HTMLElement
+  _config: Config
+
+  constructor(element: HTMLElement, config: Config) {
     this._element = element
-
-    const bodyElement = document.body as HTMLBodyElement
-    this._bodyClass = bodyElement.classList
-
-    this._config = config
+    this._config = { ...Defaults, ...config }
   }
 
   // TODO
-  menusClose(): void {
+  menusClose() {
     const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
 
     for (const navTree of navTreeview) {
@@ -80,90 +78,60 @@ class PushMenu {
     }
   }
 
-  expand(): void {
+  expand() {
     const event = new Event(EVENT_OPEN)
 
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
 
-    this._element?.dispatchEvent(event)
+    this._element.dispatchEvent(event)
   }
 
-  collapse(): void {
+  collapse() {
     const event = new Event(EVENT_COLLAPSE)
 
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+    document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
+    document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
 
-    this._element?.dispatchEvent(event)
+    this._element.dispatchEvent(event)
   }
 
-  close(): void {
-    const event = new Event(EVENT_CLOSE)
-
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-    this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-
-    this._element?.dispatchEvent(event)
-  }
-
-  sidebarHover(): void {
+  sidebarHover() {
     const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
 
     if (selSidebar) {
       selSidebar.addEventListener('mouseover', () => {
-        this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
+        document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
       })
 
       selSidebar.addEventListener('mouseout', () => {
-        this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
+        document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
       })
     }
   }
 
-  addSidebarBreakPoint(): void {
-    const bodyClass = document.body.classList
-    const widthOutput = window.innerWidth
+  addSidebarBreakPoint() {
+    const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
+    const sidebarExpand = [...sidebarExpandList].find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
+    const sidebar = document.getElementsByClassName(sidebarExpand)[0]
+    const sidebarContent = window.getComputedStyle(sidebar, '::before').getPropertyValue('content')
+    this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) }
 
-    if (widthOutput < Defaults.onLayoutMobile) {
-      bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
-      this.close()
-    }
-
-    if (widthOutput >= Defaults.onLayoutMobile) {
-      bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
-      if (!bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
+    if (window.innerWidth <= this._config.sidebarBreakpoint) {
+      this.collapse()
+    } else {
+      if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
         this.expand()
       }
 
-      if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
+      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
         this.collapse()
       }
     }
   }
 
-  removeOverlaySidebar(): void {
-    const bodyClass = document.body.classList
-    if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-      bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-      bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    }
-  }
-
-  toggleFull(): void {
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
-      this.expand()
-    } else {
-      this.close()
-    }
-  }
-
-  toggleMini(): void {
-    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
+  toggle() {
+    if (document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
       this.expand()
     } else {
       this.collapse()
@@ -173,14 +141,6 @@ class PushMenu {
   init() {
     this.addSidebarBreakPoint()
     this.sidebarHover()
-
-    const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
-    const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_APP_MAIN)
-
-    if (targetContentWrapper) {
-      targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
-      targetContentWrapper.addEventListener('click', this.removeOverlaySidebar)
-    }
   }
 }
 
@@ -191,14 +151,31 @@ class PushMenu {
  */
 
 domReady(() => {
-  const data = new PushMenu(undefined, undefined)
+  const data = new PushMenu(document.body, Defaults)
   data.init()
 
   window.addEventListener('resize', () => {
     data.init()
   })
 
-  const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
+  const sidebarOverlay = document.createElement('div')
+  sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
+  document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
+
+  sidebarOverlay.addEventListener('touchstart', event => {
+    event.preventDefault()
+    const target = event.currentTarget as HTMLElement
+    const data = new PushMenu(target, Defaults)
+    data.collapse()
+  })
+  sidebarOverlay.addEventListener('click', event => {
+    event.preventDefault()
+    const target = event.currentTarget as HTMLElement
+    const data = new PushMenu(target, Defaults)
+    data.collapse()
+  })
+
+  const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
 
   for (const btn of fullBtn) {
     btn.addEventListener('click', event => {
@@ -206,31 +183,14 @@ domReady(() => {
 
       let button = event.currentTarget as HTMLElement | undefined
 
-      if (button?.dataset.lteToggle !== 'sidebar-full') {
-        button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined
+      if (button?.dataset.lteToggle !== 'sidebar') {
+        button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
       }
 
       if (button) {
-        const data = new PushMenu(button, undefined)
-        data.toggleFull()
-      }
-    })
-  }
-
-  const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
-
-  for (const btn of miniBtn) {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-
-      let button = event.currentTarget as HTMLElement | undefined
-      if (button?.dataset.lteToggle !== 'sidebar-mini') {
-        button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined
-      }
-
-      if (button) {
-        const data = new PushMenu(button, undefined)
-        data.toggleMini()
+        event?.preventDefault()
+        const data = new PushMenu(button, Defaults)
+        data.toggle()
       }
     })
   }