navbar expanded, nadbar dark init

scss/_variables.scss

@@ -47,7 +47,7 @@ $white: #fff !default;
 $body-bg: #f5f7fb !default;
 
 $text-color: #495057 !default;
-$text-muted: #9aa0ac !default;
+$text-muted: #888e9a !default;
 $text-muted-light: #adb5bd !default;
 
 $border-color: rgba(0, 40, 100, .12) !default;
@@ -171,6 +171,14 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
+//sidenav
+$sidenav-bg: $white !default;
+$sidenav-border-color: $border-color !default;
+
+$sidenav-dark-bg: $dark !default;
+
+$sidenav-link-padding-x: .5rem !default;
+
 //spinner
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;

scss/layout/_navbar.scss

@@ -3,26 +3,10 @@
   min-height: 3.75rem;
   padding: .75rem 1rem;
 
-  .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-    vertical-align: sub;
-  }
-
   .nav-link {
     color: inherit;
     white-space: nowrap;
   }
-
-  .nav-active-border .nav-link {
-    margin: -.75rem 0;
-    line-height: 2.75rem;
-  }
 }
 
 .navbar-brand {

scss/layout/_sidebar.scss

@@ -1,74 +0,0 @@
-$sidebar-width: 15rem;
-
-.sidebar {
-  flex: 1 0 15rem;
-  width: $sidebar-width;
-  height: 100%;
-  padding: 1.5rem;
-  background: #fff;
-  border-right: 1px solid $border-color;
-
-  @include media-breakpoint-down(md) {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: 1000;
-    max-width: 90vw;
-    margin-left: -($sidebar-width);
-    transition: .3s transform;
-
-    @at-root body.sidebar-opened & {
-      transform: translate($sidebar-width, 0);
-    }
-  }
-}
-
-.sidebar-overlay {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 999;
-  display: none;
-  visibility: hidden;
-  background: rgba(0, 0, 0, .1);
-  opacity: 0;
-  backdrop-filter: blur(1px);
-
-  @include media-breakpoint-down(md) {
-    display: block;
-    transition: .3s backdrop-filter, .3s opacity;
-
-    @at-root body.sidebar-opened & {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-}
-
-.sidebar-btn {
-  position: fixed;
-  bottom: 1rem;
-  left: 1rem;
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 4rem;
-  height: 4rem;
-  color: $text-muted !important;
-  background: theme-color-lightest($text-muted);
-  border-radius: 50%;
-  box-shadow: $box-shadow-sm;
-
-  .icon {
-    width: 24px;
-    height: 24px;
-    stroke-width: 1;
-  }
-
-  @include media-breakpoint-up(md) {
-    display: none;
-  }
-}

scss/layout/_sidenav.scss

@@ -1,9 +1,81 @@
+/*
+Sidebar
+ */
 .sidenav {
-  background: $dark;
+  background: $sidenav-bg;
   width: 16rem;
-  outline: 1px solid red;
+  min-width: 16rem;
+  border-right: 1px solid $sidenav-border-color;
+  padding: .75rem 1rem;
+
+  .nav-link {
+    color: $text-muted;
+  }
 }
 
+/**
+Narrow sidebar
+ */
 .sidenav-narrow {
-  width: 4rem
+  width: 4rem;
+  min-width: 4rem;
+  padding: .5rem;
+}
+
+/*
+Right sidebar
+ */
+.sidenav-right {
+  order: 9;
+  border-left: 1px solid $sidenav-border-color;
+  border-right: none;
+}
+
+/*
+Dark sidebar
+ */
+.sidenav-dark {
+  background-color: $sidenav-dark-bg;
+  border: none;
+  color: #fff;
+}
+
+@each $breakpoint, $dimension in $grid-breakpoints {
+
+  .sidenav-expand-#{$breakpoint} {
+    display: none;
+
+    @include media-breakpoint-up(#{$breakpoint}) {
+      padding-left: 0;
+      padding-right: 0;
+      display: block;
+
+      .navbar-nav {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .navbar-nav .nav-link {
+        padding: .625rem $sidenav-link-padding-x;
+
+        &.active {
+          position: relative;
+
+          &:before {
+            top: auto;
+            left: $sidenav-link-padding-x;
+            right: $sidenav-link-padding-x;
+            bottom: calc(-#{$navbar-padding-y} - #{$border-width});
+            border-left: 0;
+            border-bottom: 1px solid $primary;
+          }
+        }
+      }
+
+      .sidenav > [class*="container"] {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
 }

scss/ui-kit.scss

@@ -13,7 +13,6 @@
 @import "layout/grid";
 @import "layout/header";
 @import "layout/navbar";
-@import "layout/sidebar";
 @import "layout/sidenav";
 @import "layout/page";