navbar folded fixes

pages/_includes/layout/sidenav-content.html

@@ -1,5 +1,5 @@
 {% assign id = 0 | random_id %}
-<div class="py-3">
+<div class="pb-3">
    <a href="{{ site.base }}" class=" navbar-brand text-inherit">
       <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
       <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
@@ -13,15 +13,17 @@
 
    {% include layout/menu.html menu=include.menu class="mb-md-4" %}
 
+   <h6 class="navbar-heading">
+      Other
+   </h6>
+
 </div>
 
-<div class="border-top">
-   <ul class="nav">
-      <li>
-         <a href="#">
-            <span class="nav-icon">{% include ui/icon.html icon="power" %}</span>
-            <span class="nav-text">Logout</span>
-         </a>
-      </li>
-   </ul>
-</div>
+<ul class="navbar-nav">
+   <li class="nav-item">
+      <a href="#" class="nav-link">
+         <span class="nav-icon">{% include ui/icon.html icon="power" %}</span>
+         <span class="nav-text">Logout</span>
+      </a>
+   </li>
+</ul>

pages/_layouts/default.html

@@ -5,7 +5,7 @@ layout: base
 <div class="d-flex h-auto min-h-screen">
    <div class="d-flex flex-fill">
       {% if page.nav-position == "all" %}
-      {% include layout/sidenav.html dark=page.sidenav-dark folded=true %}
+      {% include layout/sidenav.html dark=true folded=true %}
       {% endif %}
 
       {% if page.nav-position == "left" or page.nav-position == "right" or page.nav-position == "all"  %}

scss/layout/_navbar.scss

@@ -22,6 +22,7 @@
   flex-direction: row;
 
   .nav-link {
+    display: flex;
     color: $text-muted;
     transition: .3s color;
 
@@ -81,7 +82,7 @@
 /**
 Navbar toggler
  */
-.navbar-toggler{
+.navbar-toggler {
   padding: 0;
   border: 0;
 }
@@ -89,7 +90,6 @@ Navbar toggler
 .navbar-toggler-icon {
   width: 2rem;
   height: 2rem;
-  background: red;
 }
 
 /**
@@ -134,6 +134,7 @@ Sidebar
     display: flex;
     align-items: center;
     color: $text-muted;
+    padding: 0;
     transition: .3s background, .3s box-shadow;
 
     &.active,
@@ -184,11 +185,12 @@ Sidebar
 
   .navbar-brand {
     text-align: center;
+    height: 3rem;
   }
 
   .navbar-heading {
     @extend .text-subheader;
-    margin: 0;
+    margin: 0 0 .5rem;
   }
 
   .navbar-nav {
@@ -236,9 +238,50 @@ Dark navbar
   width: $sidenav-folded-width;
   min-width: $sidenav-folded-width;
 
+  .navbar-brand {
+    width: 3rem;
+  }
+
+  .navbar-heading {
+    display: none;
+  }
+
   .nav-text {
     display: none;
   }
+
+  .nav-link {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    &[data-toggle="collapse"]:after {
+      content: none;
+    }
+  }
+
+  .nav-icon {
+    width: 3rem;
+    height: 3rem;
+    outline: 1px solid red;
+    font-size: px2rem(15px);
+    opacity: 1;
+  }
+}
+
+.nav-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 100%;
+  flex-shrink: 0;
+  opacity: .8;
+
+  .icon {
+    font-size: inherit;
+  }
 }
 
 .nav-text {