sidebar dropdown

pages/_includes/layout/navbar-menu.html

@@ -11,6 +11,23 @@
 		</li>
 	{% endfor %}
 
+	<li class="nav-item dropdown">
+		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 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>
+	</li>
+
 	<li class="nav-item">
 		<a href="#" class="nav-link d-none-navbar-vertical">
 			<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>

pages/_includes/layout/navbar-primary.html

@@ -7,6 +7,8 @@
 			<h6 class="navbar-heading">Navigation</h6>
 			{% include layout/navbar-menu.html %}
 
+			<h6 class="navbar-heading mt-4">Tools</h6>
+
 			<div class="navbar-side d-none-navbar-vertical-narrow">
 				{% include layout/navbar-search.html %}
 				{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}

scss/_variables.scss

@@ -56,7 +56,7 @@ $text-muted-opacity: .64 !default;
 $text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
 $border-color: rgba($text-muted, .24) !default;
 
-$hover-bg: $light-white !default;
+$hover-bg: $light !default;
 $active-bg: rgba($blue, .06) !default;
 
 $dark-body-bg: #222935 !default;
@@ -215,7 +215,7 @@ $sidenav-bg: $white !default;
 $sidenav-border-color: $border-color !default;
 $sidenav-dark-bg: $dark !default;
 $sidenav-dark-color: $white !default;
-$sidenav-padding: 1.25rem !default;
+$sidenav-padding: 1rem !default;
 $sidenav-breakpoint-show: 'sm' !default;
 $sidenav-breakpoint-folded: 'lg' !default;
 $sidenav-active-accent-color: $primary !default;

scss/layout/_mainnav.scss

@@ -148,6 +148,29 @@
     }
   }
 
+  .dropdown-menu {
+    position: static;
+    background: inherit;
+    border: 0;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+  }
+
+  .dropdown-item {
+    color: inherit;
+    padding-left: add($sidenav-padding, 1.5rem);
+  }
+
+  .dropdown-item-icon {
+    display: none;
+  }
+
+  .dropdown-toggle:after {
+    margin-left: auto;
+  }
+
   &.navbar-vertical-narrow {
     @include navbar-vertical-narrow;
   }

scss/ui/_dropdowns.scss

@@ -3,15 +3,7 @@
   box-shadow: $box-shadow;
   user-select: none;
   margin: 0;
-
-  .icon {
-    width: 1em;
-    margin-right: .5rem;
-    color: inherit;
-    opacity: .5;
-    text-align: center;
-    stroke-width: 2px;
-  }
+  color: $text-muted;
 
   &.card {
     padding: 0;
@@ -24,6 +16,16 @@
   }
 }
 
+.dropdown-item-icon {
+  width: 1rem;
+  font-size: 1rem;
+  margin-right: .5rem;
+  color: inherit;
+  opacity: .5;
+  text-align: center;
+  stroke-width: 2px;
+}
+
 .dropdown-header {
   @include subheader;
   padding-bottom: .25rem;
@@ -41,6 +43,10 @@
   display: flex;
   align-items: center;
   margin: 0;
+
+  @at-root a#{&}:hover {
+    color: $body-color;
+  }
 }
 
 .dropdown-menu-arrow {