tabler dark mode, sidebar improvements, huge layout fixes

pages/_includes/layout/navbar-menu.html

 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
 <ul class="navbar-nav">
+	<li class="nav-item dropdown">
+		<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
+			<span class="nav-link-icon">{% include ui/icon.html icon="menu" %}</span>
+			<span class="nav-link-title">Dropdown</span>
+		</a>
+		<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns">
+			{% for i in (1..21) %}
+			{% assign icon = site.data.icons.fe[i] %}
+			<a class="dropdown-item" href="#">{% include ui/icon.html icon=icon class="dropdown-item-icon" %}
+				Action {{ i }}
+			</a>
+			{% endfor %}
+		</div>
+	</li>
+
 	{% for level-1 in site.data.menu %}
 		{% assign icon = level-1[1].icon %}
 		<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
@@ -12,24 +27,22 @@
 	{% endfor %}
 
 	<li class="nav-item dropdown">
-		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
+		<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
 			<span class="nav-link-icon">{% include ui/icon.html icon="menu" %}</span>
 			<span class="nav-link-title">Dropdown</span>
 		</a>
-		<div class="dropdown-menu dropdown-menu-right">
-			<div class="dropdown-menu-column">
-				{% for i in (1..21) %}
-				{% assign icon = site.data.icons.fe[i] %}
-				<a class="dropdown-item" href="#">{% include ui/icon.html icon=icon class="dropdown-item-icon" %}
-					Action {{ i }}
-				</a>
-				{% endfor %}
-			</div>
+		<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right dropdown-menu-columns dropdown-menu-columns-3">
+			{% for i in (1..21) %}
+			{% assign icon = site.data.icons.fe[i] %}
+			<a class="dropdown-item" href="#">{% include ui/icon.html icon=icon class="dropdown-item-icon" %}
+				Action {{ i }}
+			</a>
+			{% endfor %}
 		</div>
 	</li>
 
-	<li class="nav-item">
-		<a href="#" class="nav-link d-none-navbar-vertical">
+	<li class="nav-item d-none-navbar-vertical">
+		<a href="#" class="nav-link">
 			<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
 			<span class="nav-link-title">Customize</span>
 		</a>

pages/_includes/layout/navbar-primary.html

 {% assign breakpoint = 'lg' %}
-<nav class="navbar navbar-vertical navbar-expand-{{ breakpoint }} navbar-dark navbar-primary" id="navbar-primary">
+<nav class="navbar navbar-expand-{{ breakpoint }} navbar-dark navbar-primary" id="navbar-primary">
 	<div class="container">
 		{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
 

pages/_includes/layout/navbar-secondary.html

@@ -10,7 +10,7 @@
 				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					Dropdown
 				</a>
-				{% include ui/dropdown-menu.html right=true icons=true separated=true %}
+				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
 			</li>
 		</ul>
 	</div>

pages/tmp-layout.html

@@ -3,6 +3,7 @@ tmp: true
 page-header: Layout test
 page-header-actions: buttons
 menu: home
+body-class: theme-dark-auto
 ---
 
 <div class="row row-cards">
@@ -10,11 +11,13 @@ menu: home
 		<div class="card">
 			<div class="card-body">
 				<div class="btn-list">
-					<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-vertical">Toggle sidebar</a>
-					<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-vertical-narrow">Sidebar narrow</a>
-					<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-right">Sidebar left/right</a>
-					<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-color">Sidebar color</a>
-					<a href="#" class="btn btn-secondary" data-theme-toggle="navbar-secondary">Toggle secondary</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
 				</div>
 			</div>
 		</div>
@@ -30,16 +33,19 @@ menu: home
 			navbarSecondary = document.getElementById('navbar-secondary');
 
 		var events = {
-			'navbar-vertical': function () {
+			'primary-vertical': function () {
 				navbarPrimary.classList.toggle('navbar-vertical');
 			},
-			'navbar-right': function () {
+			'primary-right': function () {
 				navbarPrimary.classList.toggle('navbar-right');
 			},
-			'navbar-vertical-narrow': function () {
+			'primary-vertical-narrow': function () {
 				navbarPrimary.classList.toggle('navbar-vertical-narrow');
 			},
-			'navbar-color': function () {
+			'dark-mode': function () {
+				document.body.classList.toggle('theme-dark');
+			},
+			'primary-color': function () {
 				var classList = navbarPrimary.classList;
 
 				if (classList.contains('navbar-light')) {
@@ -50,7 +56,18 @@ menu: home
 					classList.remove('navbar-dark');
 				}
 			},
-			'navbar-secondary': function () {
+			'secondary-color': function () {
+				var classList = navbarSecondary.classList;
+
+				if (classList.contains('navbar-light')) {
+					classList.add('navbar-dark');
+					classList.remove('navbar-light');
+				} else {
+					classList.add('navbar-light');
+					classList.remove('navbar-dark');
+				}
+			},
+			'secondary-visible': function () {
 				navbarSecondary.classList.toggle('d-none');
 			},
 		};

scss/_dark.scss

 // stylelint-disable declaration-no-important
 
 @mixin dark-mode {
-  &,
-  .modal-content,
-  .dropdown-menu {
-    color: $dark-body-color;
+  & {
+    color: #ffffff;
     background: $dark-body-bg;
   }
 
   .card,
-  .sidebar,
-  .topbar {
-    color: inherit;
+  .navbar-light {
     background: $dark;
+    color: inherit;
   }
 
-  .text-body {
-    color: #afbdd1 !important;
-  }
-
-  .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226;
+  .card {
+    border-color: transparent;
   }
 
-  .navbar-brand-logo {
-    filter: brightness(0) invert(1);
+  .btn-secondary {
+    @include button-variant($min-white, $border-color, $light, rgba($dark, 0), $border-color, $light);
+    background-image: none;
   }
 
-  .form-fieldset {
-    border-color: transparent;
+  .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px $dark;
   }
 
-  .form-control,
-  .form-select,
-  .form-check-input:not(:checked) {
-    background: transparent;
-    border-color: $dark-border-color;
-    color: inherit;
+  .apexcharts-text {
+    fill: #ffffff;
   }
 
-  .input-group-text {
-    border-color: $dark-border-color;
+  .apexcharts-legend-text {
+    color: inherit !important;
   }
 
-  .brand-logo {
-    filter: brightness(0) invert(1);
+  .navbar-brand-autodark {
+    @include autodark-image;
   }
 }
 
@@ -55,7 +45,7 @@
 }
 
 @media not print and (prefers-color-scheme: dark) {
-  .auto-theme-dark {
+  .theme-dark-auto {
     @include dark-mode;
   }
 }

scss/_variables.scss

@@ -59,9 +59,7 @@ $border-color: rgba($text-muted, .24) !default;
 $hover-bg: $light !default;
 $active-bg: rgba($blue, .06) !default;
 
-$dark-body-bg: #222935 !default;
-$dark-body-color: #afbdd1 !default;
-$dark-border-color: rgba($dark-body-color, .4) !default;
+$dark-body-bg: darken($dark, 3%) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;

scss/layout/_mainnav.scss

+@mixin navbar-horizontal {
+  .d-none-navbar-horizontal,
+  ~ * .d-none-navbar-vertical-narrow {
+    display: none;
+  }
+
+  .dropdown-menu {
+    margin-top: -4px;
+    margin-right: -7px;
+  }
+}
+
 @mixin navbar-vertical-narrow {
   width: $sidenav-width-narrow;
+  overflow: visible;
+
+  .d-none-navbar-vertical-narrow,
+  ~ * .d-none-navbar-vertical-narrow {
+    display: none;
+  }
 
   .navbar-nav {
     margin-top: 0;
@@ -16,11 +34,9 @@
 
   .nav-link-icon {
     margin: 0 auto;
-  }
-
-  .d-none-navbar-vertical-narrow,
-  ~ * .d-none-navbar-vertical-narrow {
-    display: none;
+    font-size: 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
   }
 
   .navbar-brand-logo-large {
@@ -36,12 +52,39 @@
     margin-left: $sidenav-width-narrow;
   }
 
+  .dropdown-toggle:after {
+    content: none;
+  }
+
+  .dropdown-menu {
+    left: 100%;
+    top: 0;
+    margin: 0 0 0 -4px;
+
+    &:before,
+    &:after {
+      content: none;
+    }
+
+    &.dropdown-menu-right {
+      top: auto;
+      bottom: 0;
+      right: auto;
+    }
+  }
+
   &.navbar-right {
     ~ .navbar,
     ~ .content {
       margin-left: 0;
       margin-right: $sidenav-width-narrow;
     }
+
+    .dropdown-menu {
+      margin: 0 -4px 0 0;
+      left: auto;
+      right: 100%;
+    }
   }
 }
 
@@ -112,7 +155,7 @@
 
     .nav-item {
       &.active {
-        background: rgba($sidenav-active-accent-color, .032);
+        font-weight: 600;
 
         &:before {
           left: 0;
@@ -150,27 +193,42 @@
     }
   }
 
-  .dropdown-menu {
-    position: static;
-    background: inherit;
-    border: 0;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    color: inherit;
-  }
+  &:not(.navbar-vertical-narrow) {
+    .d-none-navbar-vertical-wide,
+    ~ * .d-none-navbar-vertical-wide {
+      display: none;
+    }
 
-  .dropdown-item {
-    color: inherit;
-    padding-left: add($sidenav-padding, 1.5rem);
-  }
+    .dropdown-menu {
+      position: static;
+      background: inherit;
+      border: 0;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      color: inherit;
+      columns: 1;
+
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
 
-  .dropdown-item-icon {
-    display: none;
-  }
+    .dropdown-item {
+      padding-left: add($sidenav-padding, 1.5rem);
+      opacity: $text-muted-opacity;
 
-  .dropdown-toggle:after {
-    margin-left: auto;
+      &:hover {
+        background: transparent;
+        color: inherit;
+        opacity: 1;
+      }
+    }
+
+    .dropdown-toggle:after {
+      margin-left: auto;
+    }
   }
 
   &.navbar-vertical-narrow {
@@ -282,6 +340,33 @@ Navbar brand
 /**
 Navbar colors
  */
+.navbar {
+  .navbar-nav {
+    .nav-link {
+      color: inherit;
+      opacity: $text-muted-opacity;
+
+      &:hover {
+        color: inherit;
+        opacity: 1;
+      }
+
+      &.disabled {
+        color: inherit;
+        opacity: $text-muted-opacity / 3;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: inherit;
+      opacity: 1;
+    }
+  }
+}
+
 .navbar-light {
   background: $white;
   box-shadow: inset 0 -1px 0 0 $border-color;
@@ -291,6 +376,7 @@ Navbar colors
 .navbar-dark {
   background: $sidenav-dark-bg;
   color: $sidenav-dark-color;
+  box-shadow: inset 0 -1px 0 0 $border-color;
   @include scrollbar(true);
 
   .text-muted {
@@ -299,7 +385,7 @@ Navbar colors
   }
 
   .navbar-brand-autodark {
-    filter: brightness(0) invert(1);
+    @include autodark-image;
   }
 
   .form-control {
@@ -314,9 +400,7 @@ Navbar vertical
  */
 @if $enable-navbar-vertical {
   .navbar:not(.navbar-vertical) {
-    .d-none-navbar-horizontal {
-      display: none;
-    }
+    @include navbar-horizontal;
   }
 
   .navbar-vertical {
@@ -327,9 +411,7 @@ Navbar vertical
         }
 
         @include media-breakpoint-down-than($breakpoint) {
-          .d-none-navbar-horizontal {
-            display: none;
-          }
+          @include navbar-horizontal;
         }
       }
     }

scss/mixins/_mixins.scss

@@ -41,9 +41,7 @@
   }
 }
 
-@mixin dark {
-  .bg-dark &,
-  .theme-dark & {
-    @content;
-  }
+
+@mixin autodark-image {
+  filter: brightness(0) invert(1);
 }

scss/ui/_buttons.scss

 .btn-secondary {
   @include button-variant($white, $border-color, $dark);
-  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 100%);
+  background-image: linear-gradient(-180deg, rgba($dark, 0), rgba($dark, .04) 100%);
   box-shadow: none !important;
-
-  .bg-dark &,
-  .theme-dark & {
-    @include button-variant($min-white, $border-color, $light, rgba(0, 0, 0, 0), $border-color, $light);
-    background-image: none;
-  }
 }
 
 .btn-outlined-secondary {

scss/ui/_dropdowns.scss

 .dropdown-menu {
-  min-width: 12rem;
   box-shadow: $box-shadow;
   user-select: none;
   margin: 0;
-  color: $text-muted;
 
   &.card {
     padding: 0;
@@ -16,12 +14,23 @@
   }
 }
 
+.dropdown-item {
+  min-width: 12rem;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  margin: 0;
+
+  @at-root a#{&}:hover {
+    color: $body-color;
+  }
+}
+
 .dropdown-item-icon {
   width: 1rem;
   font-size: 1rem;
   margin-right: .5rem;
-  color: inherit;
-  opacity: .5;
+  opacity: .64;
   text-align: center;
   stroke-width: 2px;
 }
@@ -38,14 +47,18 @@
   overflow-x: hidden;
 }
 
-.dropdown-item {
-  color: inherit;
-  display: flex;
-  align-items: center;
-  margin: 0;
+.dropdown-menu-columns {
+  columns: 2;
+  column-gap: 0;
 
-  @at-root a#{&}:hover {
-    color: $body-color;
+  .dropdown-item {
+    display: inline-flex;
+  }
+}
+
+@for $i from 2 through 4 {
+  .dropdown-menu-columns-#{$i} {
+    columns: $i;
   }
 }