caret fixes, scrollbar fixes, mobile fixes

pages/_includes/layout/sidebar.html

-{% assign breakpoint = include.breakpoint | default: 'md' %}
+{% assign breakpoint = include.breakpoint | default: 'lg' %}
 
 <aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% unless include.transparent %} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% endunless %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
 	<div class="container">
@@ -12,6 +12,10 @@
 
 		<div class="collapse navbar-collapse" id="navbar-menu">
 			{% include layout/navbar-menu.html class="pt-lg-3" %}
+
+			<div class="d-none d-{{ breakpoint }}-flex mt-auto">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, cupiditate doloribus dolorum impedit labore magni nisi nostrum rerum tempora! Accusantium asperiores cum, est eum quas quia similique sunt ullam vel!
+			</div>
 		</div>
 	</div>
 </aside>
\ No newline at end of file

pages/_layouts/default.html

@@ -2,7 +2,7 @@
 layout: base
 ---
 
-{% include layout/sidebar.html dark=true breakpoint="lg" %}
+{% include layout/sidebar.html %}
 
 <div class="page">
 	{% include layout/navbar.html hide-brand=true hide-menu=true class="d-none d-lg-flex" %}

scss/_mixins-override.scss

@@ -13,6 +13,7 @@
     height: $caret-width;
     border-bottom: 1px solid;
     border-left: 1px solid;
+    margin-right: .1em;
 
     @if $direction != 'left' {
       margin-left: $caret-spacing;

scss/layout/_navbar.scss

@@ -2,6 +2,8 @@
   background: $bg-color;
   color: $color;
 
+  @include scrollbar;
+
   .navbar-brand {
     color: $brand-color;
 
@@ -53,6 +55,7 @@
 @mixin navbar-dark {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
   @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color);
+  @include scrollbar(true);
 
   .input-icon-addon {
     color: rgba($dark-mode-text, .64);
@@ -70,6 +73,8 @@
 
 @mixin navbar-vertical-nav {
   .navbar-collapse {
+    flex-direction: column;
+
     .navbar-nav {
       margin-left: -($container-padding-x);
       margin-right: -($container-padding-x);
@@ -94,8 +99,21 @@
         min-width: 0;
         display: flex;
         width: auto;
+        padding-left: add($container-padding-x, 1.5rem);
       }
     }
+
+    .dropdown-toggle:after {
+      margin-left: auto;
+    }
+
+    .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0;
+    }
   }
 }
 
@@ -171,7 +189,8 @@ Navbar
               left: 0;
               right: 0;
               bottom: subtract(-.25rem, 1px);
-              border-bottom: 2px solid $primary;
+              border: 0 solid $primary;
+              border-bottom-width: 2px;
             }
           }
         }
@@ -209,7 +228,7 @@ Navbar toggler
 
 .navbar-toggler-icon {
   height: 2px;
-  width: 1.5em;
+  width: 1.25em;
   background: currentColor;
   border-radius: 10px;
   transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
@@ -229,11 +248,11 @@ Navbar toggler
   }
 
   &:before {
-    top: -.5em;
+    top: -.45em;
   }
 
   &:after {
-    bottom: -.5em;
+    bottom: -.45em;
   }
 
   .navbar-toggler[aria-expanded="true"] & {
@@ -324,7 +343,7 @@ Navbar vertical
             }
 
             .navbar-collapse {
-              align-items: flex-start;
+              align-items: stretch;
             }
 
             .navbar-nav {