From e54b4b6d3a6b1b64aafc9b8fca54bb69938315f1 Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Sun, 16 May 2021 03:05:23 +0530
Subject: [PATCH] Fix sidebar color variant

---
 index.html                           | 14 ++--
 scss/_brand-container.scss           | 96 ++++++++++++----------------
 scss/_layout-fixed.scss              |  2 +-
 scss/_main-sidebar.scss              | 15 -----
 scss/_mixins.scss                    |  4 +-
 scss/_nav-sidebar.scss               | 36 +++++++++++
 scss/_sidebar-collapse.scss          | 44 ++++++-------
 scss/mixins/_nav-treeview-dark.scss  | 86 +++++++++++++++++++++++++
 scss/mixins/_nav-treeview-light.scss | 88 +++++++++++++++++++++++++
 scss/mixins/_sidebar-color.scss      |  9 +++
 scss/mixins/_sidebar-variant.scss    | 55 ----------------
 11 files changed, 292 insertions(+), 157 deletions(-)
 create mode 100644 scss/mixins/_nav-treeview-dark.scss
 create mode 100644 scss/mixins/_nav-treeview-light.scss
 create mode 100644 scss/mixins/_sidebar-color.scss
 delete mode 100644 scss/mixins/_sidebar-variant.scss
diff --git a/index.html b/index.html
index 3876b7d4e..757428a1e 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
+<!-- For RTL verison -->
+<!-- <html lang="en" dir="rtl"> -->
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,6 +11,8 @@
   <title>AdminLTE v4</title>
   <!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
   <!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
+  <!-- For RTL verison -->
+  <!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
   <link rel="stylesheet" href="dist/css/adminlte.css">
   <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@@ -46,17 +50,13 @@
     <!-- /.navbar -->
 
     <!-- Main Sidebar Container -->
-    <aside class="main-sidebar shadow">
+    <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
       <div class="brand-container">
         <a href="#" class="brand-link">
-          <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
+          <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
           <span class="brand-text fw-light">AdminLTE 4</span>
         </a>
-        <span class="brand-icons mx-2">
-          <a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
-          <!-- <a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a> -->
-          <!-- <a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a> -->
-        </span>
+        <a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
       </div>
       <!-- Sidebar -->
       <div class="sidebar">
diff --git a/scss/_brand-container.scss b/scss/_brand-container.scss
index a88de81fa..a64838907 100644
--- a/scss/_brand-container.scss
+++ b/scss/_brand-container.scss
@@ -2,86 +2,74 @@
 // Core: Brand
 //
 
-@include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
+// @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
 
 .brand-container {
-  // grid-area: main-brand;
   display: grid;
-  grid-template-areas: "brand-link sidebar-mini-icon";
-  grid-auto-flow: column;
+  grid-template-areas: "brand-link pushmenu";
   justify-content: space-between;
   font-size: $navbar-brand-font-size;
+  transition: width $transition-speed $transition-fn;
   padding: $brand-link-padding-y $sidebar-padding-x;
   white-space: nowrap;
-  border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
-  // min-width: $sidebar-width;
-  // max-width: $sidebar-width;
-  // height: min-content;
-  // @include transition($sidebar-transition);
-  // z-index: $zindex-main-brand;
+  overflow: hidden;
 
   .brand-link {
     grid-area: brand-link;
-  }
-
-  .brand-image {
-    grid-area: brand-img;
-    float: left;
-    line-height: .8;
-    margin-left: .8rem;
-    margin-right: .5rem;
-    margin-top: -3px;
-    max-height: 33px;
-    width: auto;
-  }
-
-  .brand-text {
-    grid-area: brand-text;
-    color: $sidebar-dark-color;
 
     &:hover {
       color: $white;
       text-decoration: none;
     }
+
+    .brand-image {
+      float: left;
+      line-height: .8;
+      margin-left: .8rem;
+      margin-right: .5rem;
+      margin-top: -3px;
+      max-height: 33px;
+      width: auto;
+    }
   }
 
-  // .brand-icons {
-  //   display: inline-flex;
-
-  //   > * {
-  //     color: $gray-400;
-  //   }
-  // }
-
-  .sidebar-full-icon,
-  .header-full-icon {
-    display: none;
+  .pushmenu {
+    grid-area: pushmenu;
   }
 
-  .sidebar-mini-icon {
-    grid-area: sidebar-mini-icon;
-    color: $gray-400;
+  .sidebar-bg-dark & {
+    border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
+
+    .brand-link,
+    .pushmenu {
+      color: rgba($white, .8);
+
+      &:hover {
+        color: $white;
+      }
+    }
+  }
+
+  .sidebar-bg-light & {
+    border-bottom: $brand-link-border-buttom solid $gray-300;
+
+    .brand-link,
+    .pushmenu {
+      color: rgba($black, .8);
+
+      &:hover {
+        color: $black;
+      }
+    }
   }
 }
 
 .sidebar-collapse:not(.sidebar-hover) {
   .brand-container {
-    grid-template-areas: "sidebar-mini-icon brand-link";
     justify-content: center;
-    // min-width: $sidebar-mini-width;
-    // max-width: $sidebar-mini-width;
+
     .brand-link {
-      display: none;
+      width: 0;
     }
   }
 }
-
-// @include media-breakpoint-down(md) {
-//   .main-brand {
-//     min-width: unset;
-//     max-width: unset;
-//     .sidebar-mini-icon {
-//       display: none;
-//     }
-//   }
-// }
diff --git a/scss/_layout-fixed.scss b/scss/_layout-fixed.scss
index ef5dda7a0..48cd21cf0 100644
--- a/scss/_layout-fixed.scss
+++ b/scss/_layout-fixed.scss
@@ -16,7 +16,7 @@
       top: auto;
 
       .sidebar {
-        height: subtract(100vh, add($main-header-height-inner, $main-header-bottom-border-width / 2));
+        height: subtract(100vh, add($main-header-height-inner, $main-header-bottom-border-width));
       }
     }
 
diff --git a/scss/_main-sidebar.scss b/scss/_main-sidebar.scss
index 3539629da..2bfb8a94e 100644
--- a/scss/_main-sidebar.scss
+++ b/scss/_main-sidebar.scss
@@ -2,21 +2,6 @@
 // Core: Main Sidebar
 //
 
-// Default Sidebar Variant
-@include sidebar-variant(
-  $sidebar-dark-bg,
-  $sidebar-dark-hover-bg,
-  $sidebar-dark-color,
-  $sidebar-dark-hover-color,
-  $sidebar-dark-active-color,
-  $sidebar-dark-submenu-bg,
-  $sidebar-dark-submenu-color,
-  $sidebar-dark-submenu-hover-color,
-  $sidebar-dark-submenu-hover-bg,
-  $sidebar-dark-submenu-active-color,
-  $sidebar-dark-submenu-active-bg
-);
-
 .main-sidebar {
   grid-area: main-sidebar;
   @include transition($sidebar-transition);
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 71ca09224..97577fa3c 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -6,5 +6,7 @@
 @import "mixins/scrollbar";
 @import "mixins/brand-variant";
 @import "mixins/header-variant";
-@import "mixins/sidebar-variant";
+@import "mixins/sidebar-color";
+@import "mixins/nav-treeview-dark";
+@import "mixins/nav-treeview-light";
 @import "mixins/miscellaneous";
diff --git a/scss/_nav-sidebar.scss b/scss/_nav-sidebar.scss
index f3b1d0592..abeda1ee4 100644
--- a/scss/_nav-sidebar.scss
+++ b/scss/_nav-sidebar.scss
@@ -1,3 +1,39 @@
+.sidebar-bg-dark {
+  @include nav-treeview-dark (
+    $sidebar-dark-bg,
+    $sidebar-dark-hover-bg,
+    $sidebar-dark-color,
+    $sidebar-dark-hover-color,
+    $sidebar-dark-active-color,
+    $sidebar-dark-submenu-bg,
+    $sidebar-dark-submenu-color,
+    $sidebar-dark-submenu-hover-color,
+    $sidebar-dark-submenu-hover-bg,
+    $sidebar-dark-submenu-active-color,
+    $sidebar-dark-submenu-active-bg
+  );
+}
+
+.sidebar-bg-light {
+  @include nav-treeview-light (
+    $sidebar-light-bg,
+    $sidebar-light-hover-bg,
+    $sidebar-light-color,
+    $sidebar-light-hover-color,
+    $sidebar-light-active-color,
+    $sidebar-light-submenu-bg,
+    $sidebar-light-submenu-color,
+    $sidebar-light-submenu-hover-color,
+    $sidebar-light-submenu-hover-bg,
+    $sidebar-light-submenu-active-color,
+    $sidebar-light-submenu-active-bg
+  );
+}
+
+.sidebar-color-primary {
+  @include sidebar-color($primary);
+}
+
 // Sidebar navigation menu
 .nav-sidebar {
   // All levels
diff --git a/scss/_sidebar-collapse.scss b/scss/_sidebar-collapse.scss
index 8e985a7b4..2fb1dd696 100644
--- a/scss/_sidebar-collapse.scss
+++ b/scss/_sidebar-collapse.scss
@@ -25,7 +25,6 @@
     white-space: nowrap;
   }
 
-  .sidebar .user-panel > .info,
   .nav-sidebar .nav-link p,
   .brand-link {
     margin-left: -10px;
@@ -45,7 +44,6 @@
       display: inline-block;
     }
 
-    .sidebar .user-panel > .info,
     .nav-sidebar .nav-link p,
     .brand-link {
       margin-left: 0;
@@ -89,26 +87,24 @@
 //   }
 // }
 
-.sidebar-is-opening {
-  .sidebar .user-panel > .info,
-  .nav-sidebar .nav-link p,
-  .brand-link {
-    margin-left: 0;
-    animation-name: fadeIn;
-    animation-duration: $transition-speed;
-    animation-fill-mode: both;
-    visibility: visible;
-  }
-}
+// .sidebar-is-opening {
+//   .nav-sidebar .nav-link p,
+//   .brand-link {
+//     margin-left: 0;
+//     animation-name: fadeIn;
+//     animation-duration: $transition-speed;
+//     animation-fill-mode: both;
+//     visibility: visible;
+//   }
+// }
 
-.sidebar-is-collapsing {
-  .sidebar .user-panel > .info,
-  .nav-sidebar .nav-link p,
-  .brand-link {
-    margin-left: -10px;
-    animation-name: fadeOut;
-    animation-duration: $transition-speed;
-    animation-fill-mode: both;
-    visibility: visible;
-  }
-}
+// .sidebar-is-collapsing {
+//   .nav-sidebar .nav-link p,
+//   .brand-link {
+//     margin-left: -10px;
+//     animation-name: fadeOut;
+//     animation-duration: $transition-speed;
+//     animation-fill-mode: both;
+//     visibility: visible;
+//   }
+// }
diff --git a/scss/mixins/_nav-treeview-dark.scss b/scss/mixins/_nav-treeview-dark.scss
new file mode 100644
index 000000000..932b72ff0
--- /dev/null
+++ b/scss/mixins/_nav-treeview-dark.scss
@@ -0,0 +1,86 @@
+@mixin nav-treeview-dark(
+  $sidebar-bg,
+  $sidebar-hover-bg,
+  $sidebar-color,
+  $sidebar-hover-color,
+  $sidebar-active-color,
+  $sidebar-submenu-bg,
+  $sidebar-submenu-color,
+  $sidebar-submenu-hover-color,
+  $sidebar-submenu-hover-bg,
+  $sidebar-submenu-active-color,
+  $sidebar-submenu-active-bg
+) {
+  // Sidebar background color
+  background-color: $sidebar-bg;
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active {
+        color: $sidebar-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    > .nav-link:focus  {
+      background-color: $sidebar-hover-bg;
+      color: $sidebar-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-hover-color;
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: $sidebar-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background-color: inherit; //darken($sidebar-bg, 3%);
+    color: tint-color($sidebar-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-submenu-hover-bg;
+          color: $sidebar-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $sidebar-submenu-active-bg;
+          color: $sidebar-submenu-active-color;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/mixins/_nav-treeview-light.scss b/scss/mixins/_nav-treeview-light.scss
new file mode 100644
index 000000000..14874a50e
--- /dev/null
+++ b/scss/mixins/_nav-treeview-light.scss
@@ -0,0 +1,88 @@
+@mixin nav-treeview-light(
+  $sidebar-bg,
+  $sidebar-hover-bg,
+  $sidebar-color,
+  $sidebar-hover-color,
+  $sidebar-active-color,
+  $sidebar-submenu-bg,
+  $sidebar-submenu-color,
+  $sidebar-submenu-hover-color,
+  $sidebar-submenu-hover-bg,
+  $sidebar-submenu-active-color,
+  $sidebar-submenu-active-bg
+) {
+  // Sidebar background color
+  background-color: $sidebar-bg;
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active,
+      &:focus {
+        color: $sidebar-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      background-color: $sidebar-hover-bg;
+      color: $sidebar-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-active-color;
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: $sidebar-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background-color: inherit;
+    color: shade-color($sidebar-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-color;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-submenu-hover-bg;
+          color: $sidebar-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          background-color: $sidebar-submenu-active-bg;
+          color: $sidebar-submenu-active-color;
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: $sidebar-submenu-hover-bg;
+      }
+    }
+  }
+}
diff --git a/scss/mixins/_sidebar-color.scss b/scss/mixins/_sidebar-color.scss
new file mode 100644
index 000000000..9e755a012
--- /dev/null
+++ b/scss/mixins/_sidebar-color.scss
@@ -0,0 +1,9 @@
+// Sidebar Color
+@mixin sidebar-color($color) {
+  .nav-sidebar > .nav-item {
+    > .nav-link.active {
+      background-color: $color;
+      color: color-contrast($color);
+    }
+  }
+}
diff --git a/scss/mixins/_sidebar-variant.scss b/scss/mixins/_sidebar-variant.scss
deleted file mode 100644
index 00efbf88d..000000000
--- a/scss/mixins/_sidebar-variant.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-//
-// Mixins: Sidebar Variant
-//
-
-@mixin sidebar-variant(
-  $sidebar-bg,
-  $sidebar-hover-bg,
-  $sidebar-color,
-  $sidebar-hover-color,
-  $sidebar-active-color,
-  $sidebar-submenu-bg,
-  $sidebar-submenu-color,
-  $sidebar-submenu-hover-color,
-  $sidebar-submenu-hover-bg,
-  $sidebar-submenu-active-color,
-  $sidebar-submenu-active-bg
-) {
-  .main-sidebar {
-    background-color: $sidebar-bg;
-    color: $sidebar-color;
-  }
-
-  // Sidebar navigation menu
-  .nav-sidebar {
-    // All levels
-    .nav-link {
-      color: $sidebar-color;
-
-      &:hover,
-      &:focus {
-        color: $sidebar-hover-color;
-      }
-
-      .active {
-        color: $sidebar-active-color;
-      }
-    }
-
-    .nav-treeview {
-      background-color: $sidebar-bg;
-    }
-  }
-
-  // .sidebar-collapse:not(.layout-fixed) {
-  //   .sidebar {
-  //     .nav-sidebar .nav-item:hover {
-  //       .nav-link:not(.active) {
-  //         p {
-  //           background-color: $sidebar-bg;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-}
