navigation components

pages/_data/menu.yml

 home:
   url: index.html
-  title: Dashboard
+  title: Home
   icon: home
 
 forms:
   url: form-elements.html
-  title: Form elements
+  title: Forms
   icon: check-square
 
 base:
@@ -115,7 +115,7 @@ extra:
       title: Search results
       url: search-results.html
 docs:
-  title: Documentation
+  title: Docs
   icon: file-text
   url: docs/index.html
   children:

pages/_includes/layout/navbar-menu.html

+{% assign current-page = page.menu | default: layout.menu | split: '.' %}
+
+<ul class="navbar-nav">
+	{% for level-1 in site.data.menu %}
+		{% assign icon = level-1[1].icon %}
+		<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
+			<a href="#" class="nav-link">
+				<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
+				<span class="nav-link-title">{{ level-1[1].title }}</span>
+			</a>
+		</li>
+	{% endfor %}
+
+	<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>
+			<span class="nav-link-title">Customize</span>
+		</a>
+	</li>
+</ul>
\ No newline at end of file

pages/_includes/layout/navbar-primary.html

@@ -3,23 +3,15 @@
 	<div class="container">
 		{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
 
-		<div>
-			Lorem ipsum
-		</div>
+		<div class="navbar-collapse collapse">
+			<h6 class="navbar-heading">Navigation</h6>
+			{% include layout/navbar-menu.html %}
 
-		<div class="d-none-navbar-vertical">
-			only horizontal
+			<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" %}
 			</div>
-
-		<div class="d-none-navbar-vertical-narrow">
-			hide narrow
 		</div>
-
-		<div class="d-none-navbar-horizontal">
-			only sidebar
-		</div>
-
-		<div class="text-muted">Lorem ipsum</div>
 	</div>
 </nav>
 

pages/tmp-layout.html

@@ -2,6 +2,7 @@
 tmp: true
 page-header: Layout test
 page-header-actions: buttons
+menu: home
 ---
 
 <div class="row row-cards">

scss/_variables.scss

@@ -22,7 +22,7 @@ $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
 $light-white: rgba($light, .24) !default;
 
 $min-black: rgba($dark, .032) !default;
-$min-white: rgba($light, .032) !default;
+$min-white: rgba($light, .064) !default;
 
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
@@ -218,6 +218,7 @@ $sidenav-dark-color: $white !default;
 $sidenav-padding: 1.25rem !default;
 $sidenav-breakpoint-show: 'sm' !default;
 $sidenav-breakpoint-folded: 'lg' !default;
+$sidenav-active-accent-color: $primary !default;
 
 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
@@ -349,10 +350,15 @@ $popover-border-color: $border-color !default;
 
 $navbar-padding-y: .75rem !default;
 $navbar-nav-link-padding-x: .75rem !default;
-$navbar-light-color: $text-muted !default;
+
+$navbar-light-color: rgba($body-color, .64) !default;
 $navbar-light-active-color: $primary !default;
 $navbar-light-hover-color: $body-color !default;
 
+$navbar-dark-color: rgba($white, .64) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-hover-color: $white !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
@@ -455,3 +461,4 @@ $enable-social-colors: true !default;
 $enable-ghost-buttons: true !default;
 $enable-extra-colors: true !default;
 $enable-gradients: false !default;
+$enable-navbar-vertical: true !default;

scss/layout/_mainnav.scss

+@mixin navbar-vertical-narrow {
+  width: $sidenav-width-narrow;
+
+  .navbar-nav {
+    margin-top: 0;
+  }
+
+  .nav-link {
+    height: 3rem; //todo: to variable
+  }
+
+  .nav-link-title {
+    display: none;
+  }
+
+  .nav-link-icon {
+    margin: 0 auto;
+  }
+
+  .d-none-navbar-vertical-narrow {
+    display: none;
+  }
+
+  .navbar-brand-logo-large {
+    display: none;
+  }
+
+  .navbar-brand-logo-small {
+    display: inline-block;
+  }
+
+  ~ .navbar,
+  ~ .content {
+    margin-left: $sidenav-width-narrow;
+  }
+
+  &.navbar-right {
+    ~ .navbar,
+    ~ .content {
+      margin-left: 0;
+      margin-right: $sidenav-width-narrow;
+    }
+  }
+}
+
 @mixin navbar-vertical {
   position: fixed;
   left: 0;
@@ -7,10 +52,15 @@
   z-index: $zindex-fixed;
   min-height: auto;
   align-items: start;
+  overflow: auto;
+  box-shadow: inset -1px 0 0 0 $border-color;
 
   > [class*="container"] {
     flex-direction: column;
-    align-items: start;
+    align-items: stretch;
+    padding-left: 0;
+    padding-right: 0;
+    min-height: 100%;
   }
 
   ~ .navbar,
@@ -32,65 +82,159 @@
     justify-content: center;
   }
 
-  &.navbar-vertical-narrow {
-    width: $sidenav-width-narrow;
+  .navbar-heading {
+    @include subheader();
+    display: block;
+    margin-bottom: .5rem;
+  }
 
-    .d-none-navbar-vertical-narrow {
-      display: none;
+  .navbar-collapse {
+    flex-direction: column;
+    text-align: left;
+    align-items: normal;
+
+    padding: $sidenav-padding $sidenav-padding;
   }
 
-    .navbar-brand-logo-large {
-      display: none;
+  .navbar-nav {
+    flex-direction: column;
+    margin-left: -($sidenav-padding);
+    margin-right: -($sidenav-padding);
+
+    .nav-link {
+      min-height: 0;
+      padding-left: $sidenav-padding;
+      padding-right: $sidenav-padding;
     }
 
-    .navbar-brand-logo-small {
-      display: inline-block;
+    .nav-item {
+      &.active {
+        background: rgba($sidenav-active-accent-color, .032);
+
+        &:before {
+          left: 0;
+          right: auto;
+          top: 0;
+          bottom: 0;
+          height: auto;
+          width: 2px;
+        }
+      }
+    }
   }
 
-    ~ .navbar,
-    ~ .content {
-      margin-left: $sidenav-width-narrow;
+  .navbar-side {
+    margin-left: 0;
+    margin-top: auto;
+    padding-left: 0;
+    padding-top: $sidenav-padding;
+
+    > * {
+      margin-left: 0;
+      margin-top: 1rem;
     }
   }
 
   &.navbar-right {
     left: auto;
     right: 0;
+    box-shadow: inset 1px 0 0 0 $border-color;
 
     ~ .navbar,
     ~ .content {
       margin-left: 0;
       margin-right: $sidenav-width;
     }
+  }
 
   &.navbar-vertical-narrow {
-      ~ .navbar,
-      ~ .content {
-        margin-right: $sidenav-width-narrow;
-      }
-    }
+    @include navbar-vertical-narrow;
   }
 }
 
 .page {
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .content {
-  padding-top: map-get($spacers, 4);
-  padding-bottom: map-get($spacers, 4);
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
 
   @include media-breakpoint-up(xl) {
     padding-left: .5rem;
     padding-right: .5rem;
   }
+
+  @media print {
+    margin: 0 !important;
+  }
 }
 
 .navbar {
   min-height: $navbar-height;
   padding-top: 0; //todo: move to varaibles
   padding-bottom: 0;
+
+  @media print {
+    display: none;
+    margin: 0 !important;
+  }
+
+  .nav-link {
+    min-height: $navbar-height;
+  }
+
+  .nav-link-icon {
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    margin-right: .5rem;
+    line-height: .99;
+  }
+}
+
+.navbar-expand {
+  @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+    &-#{$breakpoint} {
+      @include media-breakpoint-up($breakpoint) {
+        .navbar-nav {
+          margin-left: (-$navbar-nav-link-padding-x);
+
+          .nav-item {
+            position: relative;
+
+            &.active {
+              &:before {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: $navbar-nav-link-padding-x;
+                right: $navbar-nav-link-padding-x;
+                height: 1px;
+                background: $sidenav-active-accent-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.navbar-side {
+  margin-left: auto;
+  padding-left: 1.5rem;
+
+  > * {
+    margin-left: 1rem;
+  }
+}
+
+.navbar-heading {
+  display: none;
 }
 
 /**
@@ -113,12 +257,14 @@ Navbar colors
  */
 .navbar-light {
   background: $white;
-  box-shadow: 0 0 0 1px $border-color;
+  box-shadow: inset 0 -1px 0 0 $border-color;
+  @include scrollbar;
 }
 
 .navbar-dark {
   background: $sidenav-dark-bg;
   color: $sidenav-dark-color;
+  @include scrollbar(true);
 
   .text-muted {
     color: inherit !important;
@@ -128,18 +274,25 @@ Navbar colors
   .navbar-brand-autodark {
     filter: brightness(0) invert(1);
   }
+
+  .form-control {
+    border-color: transparent;
+    background: $min-white;
+    color: $white;
+  }
 }
 
 /**
 Navbar vertical
  */
-.navbar:not(.navbar-vertical) {
+@if $enable-navbar-vertical {
+  .navbar:not(.navbar-vertical) {
     .d-none-navbar-horizontal {
       display: none;
     }
-}
+  }
 
-.navbar-vertical {
+  .navbar-vertical {
     @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
       &.navbar-expand-#{$breakpoint} {
         @include media-breakpoint-up($breakpoint) {
@@ -153,6 +306,7 @@ Navbar vertical
         }
       }
     }
+  }
 }
 
 /**

scss/ui/_type.scss

@@ -76,7 +76,7 @@ pre {
   overflow: auto;
   font-size: $code-font-size;
   hyphens: none;
-  line-height: 1.5;
+  line-height: $line-height-base;
   tab-size: 3;
   border-radius: $border-radius;
   white-space: pre-wrap;