From 5f43fabb7f6034781c72e28d5e3b7989f5b39a13 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 3 Feb 2020 00:54:36 +0100
Subject: [PATCH] sidebar dropdown

---
 pages/_includes/layout/navbar-menu.html    | 17 +++++++++++++++
 pages/_includes/layout/navbar-primary.html |  2 ++
 scss/_variables.scss                       |  4 ++--
 scss/layout/_mainnav.scss                  | 23 +++++++++++++++++++++
 scss/ui/_dropdowns.scss                    | 24 ++++++++++++++--------
 5 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/pages/_includes/layout/navbar-menu.html b/pages/_includes/layout/navbar-menu.html
index 9bf276fa3..afc49628f 100644
--- a/pages/_includes/layout/navbar-menu.html
+++ b/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>
diff --git a/pages/_includes/layout/navbar-primary.html b/pages/_includes/layout/navbar-primary.html
index 9080ef415..87b3cbfc8 100644
--- a/pages/_includes/layout/navbar-primary.html
+++ b/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" %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b4c4d8c84..e8898c917 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/layout/_mainnav.scss b/scss/layout/_mainnav.scss
index 7d0e7cead..67f21380c 100644
--- a/scss/layout/_mainnav.scss
+++ b/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;
   }
diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss
index 49d9956f1..cab355f6a 100644
--- a/scss/ui/_dropdowns.scss
+++ b/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 {