fix #723

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:

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] %}

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>

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>

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;
       }
 

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%;
   }
 }