fix invisible nav items if there is a second nav in content

build/scss/_cards.scss

@@ -62,7 +62,7 @@
     }
   }
 
-  .nav.flex-column {
+  .nav.flex-column:not(.nav-sidebar) {
     > li {
       border-bottom: 1px solid $card-border-color;
       margin: 0;

build/scss/_main-sidebar.scss

@@ -14,7 +14,6 @@
       outline: none;
     }
   }
-
 }
 
 .sidebar {
@@ -201,7 +200,7 @@
   }
 }
 
-.sidebar-is-opening .nav-sidebar {
+.sidebar-is-opening .sidebar .nav-sidebar {
   .nav-link p {
     animation-name: fadeIn;
     animation-duration: $transition-speed;
@@ -400,7 +399,7 @@
     // Hover and active states
     &.menu-open > .nav-link,
     &:hover > .nav-link,
-    > .nav-link:focus  {
+    > .nav-link:focus {
       background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-hover-color;
     }
@@ -575,7 +574,7 @@
     }
   }
 
-  .sidebar-collapse &.nav-child-indent {
+  .sidebar-collapse &.nav-child-indent .sidebar {
     .nav-treeview {
       .nav-icon {
         margin-left: .55rem;
@@ -731,39 +730,38 @@
       .nav-icon {
         @include transition(margin-left $transition-fn $transition-speed);
         margin-left: .6rem;
-
       }
     }
   }
 
-  .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-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;
-
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
       .nav-treeview {
-        padding-left: 2rem;
-        margin-left: -1rem;
+        padding-left: 1rem;
+
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+        }
       }
     }
   }
 
-  .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-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;
-
+  .sidebar-mini.sidebar-collapse.text-sm,
+  .sidebar-mini-md.sidebar-collapse.text-sm,
+  .sidebar-mini-xs.sidebar-collapse.text-sm {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
       .nav-treeview {
-        padding-left: 1rem;
-        margin-left: -.5rem;
+        padding-left: .5rem;
+
+        .nav-treeview {
+          padding-left: 1rem;
+          margin-left: -.5rem;
+        }
       }
     }
   }
@@ -771,40 +769,41 @@
   .sidebar-mini.sidebar-collapse &,
   .sidebar-mini-md.sidebar-collapse &,
   .sidebar-mini-xs.sidebar-collapse & {
-    > .nav-item > .nav-link {
-      .nav-icon {
-        margin-left: .55rem;
-      }
-
-      &.active {
-        > .nav-icon{
-          margin-left: .36rem;
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .55rem;
+        }
+        &.active {
+          > .nav-icon {
+            margin-left: .36rem;
+          }
         }
       }
-    }
-
-    &.nav-child-indent {
-      .nav-treeview {
+      &.nav-child-indent {
         .nav-treeview {
-          padding-left: 0;
-          margin-left: 0;
+          .nav-treeview {
+            padding-left: 0;
+            margin-left: 0;
+          }
         }
       }
     }
   }
 
-
   .sidebar-mini.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;
-      }
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .75rem;
+        }
 
-      &.active {
-        > .nav-icon{
-          margin-left: calc(.75rem - 3px);
+        &.active {
+          > .nav-icon {
+            margin-left: calc(.75rem - 3px);
+          }
         }
       }
     }
@@ -855,7 +854,6 @@
   }
 }
 
-
 .nav-collapse-hide-child {
   .menu-open > .nav-treeview {
     max-height: min-content;
@@ -864,7 +862,7 @@
     animation-fill-mode: both;
   }
 
-  .sidebar-collapse & {
+  .sidebar-collapse .sidebar & {
     .menu-open > .nav-treeview {
       max-height: 0;
       animation-name: fadeOut;
@@ -873,17 +871,17 @@
     }
   }
 
-  .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-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;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &,
+    .main-sidebar:not(.sidebar-no-expand):hover & {
+      .menu-open > .nav-treeview {
+        max-height: min-content;
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+      }
     }
   }
 }
@@ -1136,7 +1134,7 @@
       padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
     }
 
-    height: fill-available;
+    height: stretch;
   }
 
   .main-sidebar-custom-lg {
@@ -1169,7 +1167,7 @@
   }
 }
 
-@include dark-mode () {
+@include dark-mode() {
   @each $name, $color in $theme-colors-alt {
     .sidebar-dark-#{$name},
     .sidebar-light-#{$name} {

build/scss/_sidebar-mini.scss

@@ -451,19 +451,21 @@
         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;
-      }
+      .sidebar {
+        .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;
+        .nav-sidebar > .nav-item .nav-icon {
+          margin-right: 0;
+        }
       }
     }
   }

build/scss/mixins/_sidebar.scss

@@ -45,13 +45,13 @@
       display: none;
     }
 
-    .nav-sidebar .nav-link p {
+    .sidebar .nav-sidebar .nav-link p {
       width: 0;
       white-space: nowrap;
     }
 
     .sidebar .user-panel > .info,
-    .nav-sidebar .nav-link p,
+    .sidebar .nav-sidebar .nav-link p,
     .brand-text {
       margin-left: -10px;
       animation-name: fadeOut;
@@ -109,7 +109,7 @@
         }
 
         .user-panel > .info,
-        .nav-sidebar .nav-link p,
+        .sidebar .nav-sidebar .nav-link p,
         .brand-text,
         .logo-xl {
           display: inline-block;