diff --git a/scss/_variables.scss b/scss/_variables.scss
index 55293cee4..6472c90cf 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index eda8fa172..3928ab298 100644
--- a/scss/layout/_navbar.scss
+++ b/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 {
diff --git a/scss/layout/_sidebar.scss b/scss/layout/_sidebar.scss
deleted file mode 100644
index 89748d50a..000000000
--- a/scss/layout/_sidebar.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
index 36e5b19d9..9992a4ad4 100644
--- a/scss/layout/_sidenav.scss
+++ b/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;
+ }
+ }
+ }
}
diff --git a/scss/ui-kit.scss b/scss/ui-kit.scss
index 6a47c24c3..304912c40 100644
--- a/scss/ui-kit.scss
+++ b/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";
+
{% endif %}
+ {% if include.logo %}
{% endif %}
{% if include.title %}{{ include.title }}{% endif %}
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 0c8339141..6096e37dc 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -7,10 +7,8 @@ layout: base