From 8381f5b989adb1512fe2c5a6f2755d2a7f287d90 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 21 Nov 2020 21:12:20 +0100
Subject: [PATCH] fix #723

---
 src/pages/_data/menu.yml               |  2 --
 src/pages/_includes/docs/menu.html     |  4 ++--
 src/pages/_includes/layout/navbar.html |  2 +-
 src/pages/_layouts/docs.html           |  2 +-
 src/scss/layout/_navbar.scss           | 13 +++++++++++--
 src/scss/ui/_nav.scss                  |  3 +--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index 5ac73c4d7..393afe43c 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -5,7 +5,6 @@ home:
 
 base:
   title: Interface
-  title-long: User Interface
   icon: package
   columns: 2
   children:
@@ -77,7 +76,6 @@ base:
       title: Markdown
       url: markdown.html
 
-
     authentication:
       title: Authentication
       children:
diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html
index 6d78c7bd2..f34748002 100644
--- a/src/pages/_includes/docs/menu.html
+++ b/src/pages/_includes/docs/menu.html
@@ -1,6 +1,6 @@
 {% assign current-menu = page.menu | split: '.' %}
 
-<ul class="nav nav-pills nav-vertical">
+<ul class="nav nav-vertical">
 	{% for doc in site.data.docs %}
 	<li class="nav-item">
 		{% assign key = doc[0] %}
@@ -28,7 +28,7 @@
 		</a>
 
 		{% if item.children %}
-			<ul class="nav collapse{% if current-item %} show{% endif %}" id="menu-{{ key }}">
+			<ul class="nav nav-pills collapse{% if current-item %} show{% endif %}" id="menu-{{ key }}">
 			{% for subdoc in item.children %}
 				{% assign subkey = subdoc[0] %}
 				{% assign subitem = subdoc[1] %}
diff --git a/src/pages/_includes/layout/navbar.html b/src/pages/_includes/layout/navbar.html
index ea6d587d5..e775ea156 100644
--- a/src/pages/_includes/layout/navbar.html
+++ b/src/pages/_includes/layout/navbar.html
@@ -30,7 +30,7 @@
 							{% assign search-class = search-class | append: " flex-md-grow-0" %}
 						{% endunless %}
 
-						{% include layout/navbar-search.html breakpoint="lg" rounded=include.transparent class=search-class dark=include.dark %}
+						{% include layout/navbar-search.html breakpoint=breakpoint rounded=include.transparent class=search-class dark=include.dark %}
 					</div>
 				{% endif %}
 			</div>
diff --git a/src/pages/_layouts/docs.html b/src/pages/_layouts/docs.html
index 4c07e883b..dce275056 100644
--- a/src/pages/_layouts/docs.html
+++ b/src/pages/_layouts/docs.html
@@ -7,7 +7,7 @@ page-header: Documentation
 
 {% assign current-url = page.url | replace_regex: "^/", "" %}
 
-<div class="row g-5">
+<div class="row">
 	<div class="d-none d-lg-block col-lg-3">
 		{% include docs/menu.html %}
 	</div>
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index 510f6bd08..d79ec26e2 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -105,12 +105,21 @@
       box-shadow: none;
       border: none;
       min-width: 0;
+      margin: 0;
 
       .dropdown-item {
         min-width: 0;
         display: flex;
         width: auto;
-        padding-left: add($container-padding-x, 1.5rem);
+        padding-left: add($container-padding-x, 2rem);
+      }
+
+      .dropdown-menu .dropdown-item {
+        padding-left: add($container-padding-x, 3.5rem);
+      }
+
+      .dropdown-menu .dropdown-menu .dropdown-item {
+        padding-left: add($container-padding-x, 5rem);
       }
     }
 
@@ -185,7 +194,7 @@ Navbar
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
+      @include media-breakpoint-down(breakpoint-next($breakpoint)) {
         @include navbar-vertical-nav;
       }
 
diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss
index 4e53eb1a9..a419e3c48 100644
--- a/src/scss/ui/_nav.scss
+++ b/src/scss/ui/_nav.scss
@@ -90,14 +90,13 @@
 }
 
 .nav-link-icon {
-  width: $icon-size;
+  width: 1.5rem;
   height: $icon-size;
   margin-inline-end: .5rem;
   opacity: $text-muted-opacity;
 
   svg {
     display: block;
-    width: 100%;
     height: 100%;
   }
 }
\ No newline at end of file