navbar layout refactor

pages/_includes/layout/menu.html

@@ -6,7 +6,7 @@
    {% assign icon = level-1[1].icon %}
 
    {% assign has-children = false %}
-   {% if level-1[1].children or level-1[1].docs %}
+   {% if level-1[1].children %}
       {% assign has-children = true %}
    {% endif %}
 
@@ -31,23 +31,6 @@
 
       {% if has-children %}
       <div class="dropdown-menu">
-         {% if level-1[1].docs %}
-         {% for d in site.data.docs %}
-         {% assign doc = site.docs | where: "slug", d.page | first %}
-         {% if doc %}
-         <a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-            <span class="nav-text">
-               {{ doc.title }}
-
-               {% if doc.new %}
-               <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
-               {% endif %}
-            </span>
-         </a>
-         {% endif %}
-         {% endfor %}
-         {% endif %}
-
          {% for level-2 in level-1[1].children %}
          <a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
             <span class="nav-text">

pages/_includes/layout/topmenu.html

-<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
-   <div class="container">
-      {% include layout/menu.html top=true %}
+<header class="topnav">
+   <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
+      <div class="container{% if include.fluid %}-fluid{% endif %}">
+         {% include layout/menu.html top=true %}
+      </div>
    </div>
-</div>
-<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
+</header>

pages/_includes/layout/topnav.html

-<header class="layout-area-topnav navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
-   <div class="container{% if include.fluid %} container-fluid{% endif %}">
-      {% include parts/navbar.html logo=true search=true user-menu=1 person-id=1 dark=include.dark notifications=true %}
+<header class="topnav">
+   <div class="container{% if include.fluid %}-fluid{% endif %}">
+      <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
+         {% include_cached parts/navbar.html search=true %}
+      </div>
    </div>
 </header>
 
+

pages/_includes/parts/navbar-search.html

+<div class="navbar-search">
+   <form action="" method="get">
+      <div class="input-group">
+         <input type="text" name="q" class="form-control" placeholder="Search...">
+         <div class="input-group-append">
+            <button class="btn btn-secondary" type="submit">{% include_cached ui/icon.html icon="search" %}</button>
+         </div>
+      </div>
+   </form>
+</div>

pages/_includes/parts/navbar.html

 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
-<a class="layout-toggler" data-toggle="menubar">
-   <span class="layout-toggler-icon"></span>
-</a>
-
 <a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
-   {% if include.icon %}<span class="text-green">{% include_cached ui/icon.html icon=include.icon %}</span>{% endif %}
-   {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-   {% if include.logo %}
-      <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
-      <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
-   {% endif %}
-   {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
+   <img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
+   <img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
 </a>
 
-<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
-
-   {% if include.notifications %}
-   <li class="nav-item dropdown mr-3">
-      <a class="nav-link text-reset px-2" data-toggle="dropdown">
-         {% include_cached ui/icon.html icon="bell" %}
-         <span class="badge badge-pill badge-up bg-primary">4</span>
-      </a>
-      <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right mt-3 p-0">
-         <div class="scrollable">
-            <div class="list list-row">
-            </div>
-         </div>
-         <div class="d-flex px-3 py-2 b-t">
-            <div class="flex">
-               <span>6 Notifications</span>
-            </div>
-            <a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
-         </div>
-      </div>
-   </li>
-   {% endif %}
+{% comment %}
+{% if include.search %}
+   {% include parts/navbar-search.html %}
+{% endif %}
+{% endcomment %}
 
+<ul class="nav navbar-menu align-items-center ml-auto">
    <li class="nav-item d-none d-lg-flex mr-3">
       <a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
    </li>
 
-   {% if include.user-menu %}
    <li class="nav-item dropdown">
       <a href="#" data-toggle="dropdown"
          class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
@@ -75,42 +49,4 @@
          </a>
       </div>
    </li>
-   {% endif %}
-
-   {% if include.manage %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-secondary">Manage Widgets</a>
-   </li>
-   {% endif %}
-
-   {% if include.register %}
-   <li class="nav-item ">
-      <a href="#" class="nav-link">
-         Sign in
-      </a>
-   </li>
-   <li class="d-flex align-items-center">
-      <a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
-         Register
-      </a>
-   </li>
-   {% endif %}
-
-   {% if include.plus %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-primary btn-icon">{% include_cached ui/icon.html icon="plus" %}</a>
-   </li>
-   {% endif %}
-
-   {% if include.premium %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-success">Go Premium</a>
-   </li>
-   {% endif %}
-
-   {% if include.sync %}
-   <li class="nav-item">
-      <a href="#" class="btn btn-secondary">{% include_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
-   </li>
-   {% endif %}
 </ul>

pages/_layouts/default.html

@@ -7,9 +7,9 @@ layout: base
    {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
    {% include layout/topmenu.html %}
 
-   <div class="layout-area-main">
+   <div class="">
 
-      <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
+      <main class="container-{% if page.container-size %}{{ page.container-size }}{% else %}xl{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}
 
          {{ content }}

scss/_variables.scss

@@ -117,7 +117,7 @@ $avatar-sizes: (
 //Fonts
 $font-size-base: 1rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: 1.6 !default;
+$line-height-base: 1.5 !default;
 $body-letter-spacing: null !default;
 
 $border-radius: 3px !default;
@@ -266,11 +266,19 @@ $loader-size: 2.5rem !default;
 
 //navbar
 $navbar-bg: $white !default;
+$navbar-height: 3.5rem !default;
 $navbar-border-color: $border-color !default;
 $navbar-border-color: $border-color !default;
 
 //nav
-$nav-link-padding-y: .25rem !default;
+$nav-link-padding-y: 1rem !default;
+
+$navbar-padding-x: .75rem !default;
+$navbar-padding-y: .75rem !default;
+$navbar-nav-link-padding-x: .75rem !default;
+$navbar-light-color: $text-muted !default;
+$navbar-light-active-color: $primary !default;
+$navbar-light-hover-color: $body-color !default;
 
 //pagination
 $pagination-border-width: 0 !default;
@@ -289,13 +297,6 @@ $sidenav-border-color: $border-color-alpha !default;
 $sidenav-dark-bg: $dark !default;
 $sidenav-link-padding-x: .75rem !default;
 
-$navbar-padding-x: .75rem !default;
-$navbar-padding-y: .75rem !default;
-$navbar-nav-link-padding-x: .75rem !default;
-$navbar-light-color: $text-muted !default;
-$navbar-light-active-color: $primary !default;
-$navbar-light-hover-color: $body-color !default;
-
 //steps
 $steps-border-width: 2px !default;
 $steps-color-inactive: #f3f5f5 !default;

scss/layout/_layout.scss

-/**
-Layout
- */
-@mixin menu-side {
-  align-items: flex-start;
-}
-
-@mixin menu-collapsed {
-  .layout-area-menu {
-    position: fixed;
-    left: -($sidenav-width);
-    top: 0;
-    bottom: 0;
-    background: $dark;
-    color: $white;
-    width: $sidenav-width;
-    z-index: $zindex-fixed;
-    transition: .3s left;
-
-    @include menu-side;
-  }
-
-  .layout-area-menu-backdrop {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100vw;
-    background: rgba($dark, .1);
-    z-index: $zindex-fixed - 1;
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .layout-toggler {
-    display: block;
-  }
-
-  @at-root body.aside-visible & {
-    .layout-area-menu {
-      left: 0;
-    }
-
-    .layout-area-menu-backdrop {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-}
-
-.layout {
-  position: relative;
-  display: grid;
-
-  grid-template: "head" auto "menu" auto "main" auto /
-    100%;
-}
-
-.layout-collapsed {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint);
-
-    @if $infix != '' {
-      @include media-breakpoint-down($breakpoint) {
-
-        &#{$infix} {
-          @include menu-collapsed;
-        }
-      }
-    } @else {
-      @include menu-collapsed;
-    }
-  }
-}
-
-.layout-sidebar {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint);
-
-    @include media-breakpoint-up($breakpoint) {
-      .layout-toggler {
-        display: none;
-      }
-
-      &#{$infix} {
-        grid-template: "menu head" auto "menu main" auto /
-          auto 1fr;
-
-        .layout-area-menu {
-          width: $sidenav-width;
-        }
-      }
-
-      &-folded#{$infix} {
-        grid-template: "menu head" auto "menu main" auto /
-          auto 1fr;
-
-        .layout-area-menu {
-          width: $sidenav-folded-width;
-        }
-      }
-    }
+.topnav {
+  border-bottom: 1px solid;
+  background-color: $navbar-bg;
+  border-color: $navbar-border-color;
+
+  .navbar {
+    margin: 0;
+    padding: 0;
+    min-height: $navbar-height;
   }
 }
 
-.layout-toggler {
-  display: none;
-  width: 2rem;
-  height: 2rem;
-  cursor: pointer;
-  position: relative;
-  opacity: .8;
-
-  &-icon {
-    top: 50%;
-    left: 50%;
-    display: block;
-    margin-top: -2px;
-    margin-left: -.75rem;
-
-    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
-    transition-duration: 75ms;
-
-    &,
-    &:after,
-    &:before {
-      content: '';
-      width: 1.5rem;
-      height: 2px;
-      background: currentColor;
-      position: absolute;
-      border-radius: 4px;
-    }
-
-    &:before {
-      top: -.5rem;
-      transition: top 75ms ease .12s, opacity 75ms ease;
-    }
-
-    &:after {
-      bottom: -.5rem;
-      transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
-    }
-
-    @at-root body.aside-visible & {
-      transform: rotate(45deg);
-      transition-delay: .12s;
-      transition-timing-function: cubic-bezier(.215, .61, .355, 1);
 
-      &:before {
-        top: 0;
-        transition: top 75ms ease, opacity 75ms ease .12s;
-        opacity: 0;
-      }
 
-      &:after {
-        bottom: 0;
-        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
-        transform: rotate(-90deg);
-      }
-    }
-  }
-}
-
-.layout-area-topnav {
-  grid-area: head;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.layout-area-menu {
-  grid-area: menu;
-}
-
-.layout-area-menu-backdrop {
-  display: none;
-}
-
-.layout-area-main {
-  grid-area: main;
-}
+///**
+//Layout
+// */
+//@mixin menu-side {
+//  align-items: flex-start;
+//}
+//
+//@mixin menu-collapsed {
+//  .layout-area-menu {
+//    position: fixed;
+//    left: -($sidenav-width);
+//    top: 0;
+//    bottom: 0;
+//    background: $dark;
+//    color: $white;
+//    width: $sidenav-width;
+//    z-index: $zindex-fixed;
+//    transition: .3s left;
+//
+//    @include menu-side;
+//  }
+//
+//  .layout-area-menu-backdrop {
+//    display: block;
+//    position: fixed;
+//    top: 0;
+//    left: 0;
+//    bottom: 0;
+//    width: 100vw;
+//    background: rgba($dark, .1);
+//    z-index: $zindex-fixed - 1;
+//    visibility: hidden;
+//    opacity: 0;
+//  }
+//
+//  .layout-toggler {
+//    display: block;
+//  }
+//
+//  @at-root body.aside-visible & {
+//    .layout-area-menu {
+//      left: 0;
+//    }
+//
+//    .layout-area-menu-backdrop {
+//      opacity: 1;
+//      visibility: visible;
+//    }
+//  }
+//}
+//
+//.layout {
+//  position: relative;
+//  display: grid;
+//
+//  grid-template: "head" auto "menu" auto "main" auto /
+//    100%;
+//}
+//
+//.layout-collapsed {
+//  @each $breakpoint in map-keys($grid-breakpoints) {
+//    $infix: breakpoint-infix($breakpoint);
+//
+//    @if $infix != '' {
+//      @include media-breakpoint-down($breakpoint) {
+//
+//        &#{$infix} {
+//          @include menu-collapsed;
+//        }
+//      }
+//    } @else {
+//      @include menu-collapsed;
+//    }
+//  }
+//}
+//
+//.layout-sidebar {
+//  @each $breakpoint in map-keys($grid-breakpoints) {
+//    $infix: breakpoint-infix($breakpoint);
+//
+//    @include media-breakpoint-up($breakpoint) {
+//      .layout-toggler {
+//        display: none;
+//      }
+//
+//      &#{$infix} {
+//        grid-template: "menu head" auto "menu main" auto /
+//          auto 1fr;
+//
+//        .layout-area-menu {
+//          width: $sidenav-width;
+//        }
+//      }
+//
+//      &-folded#{$infix} {
+//        grid-template: "menu head" auto "menu main" auto /
+//          auto 1fr;
+//
+//        .layout-area-menu {
+//          width: $sidenav-folded-width;
+//        }
+//      }
+//    }
+//  }
+//}
+//
+//.layout-toggler {
+//  display: none;
+//  width: 2rem;
+//  height: 2rem;
+//  cursor: pointer;
+//  position: relative;
+//  opacity: .8;
+//
+//  &-icon {
+//    top: 50%;
+//    left: 50%;
+//    display: block;
+//    margin-top: -2px;
+//    margin-left: -.75rem;
+//
+//    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+//    transition-duration: 75ms;
+//
+//    &,
+//    &:after,
+//    &:before {
+//      content: '';
+//      width: 1.5rem;
+//      height: 2px;
+//      background: currentColor;
+//      position: absolute;
+//      border-radius: 4px;
+//    }
+//
+//    &:before {
+//      top: -.5rem;
+//      transition: top 75ms ease .12s, opacity 75ms ease;
+//    }
+//
+//    &:after {
+//      bottom: -.5rem;
+//      transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+//    }
+//
+//    @at-root body.aside-visible & {
+//      transform: rotate(45deg);
+//      transition-delay: .12s;
+//      transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+//
+//      &:before {
+//        top: 0;
+//        transition: top 75ms ease, opacity 75ms ease .12s;
+//        opacity: 0;
+//      }
+//
+//      &:after {
+//        bottom: 0;
+//        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+//        transform: rotate(-90deg);
+//      }
+//    }
+//  }
+//}
+//
+//.layout-area-topnav {
+//  grid-area: head;
+//  padding-left: 0;
+//  padding-right: 0;
+//}
+//
+//.layout-area-menu {
+//  grid-area: menu;
+//}
+//
+//.layout-area-menu-backdrop {
+//  display: none;
+//}
+//
+//.layout-area-main {
+//  grid-area: main;
+//}

scss/layout/_navbar.scss

 .navbar {
-  border-bottom: 1px solid;
-  background-color: $navbar-bg;
-  border-color: $navbar-border-color;
+  //padding-top: 0;
+  //padding-bottom: 0;
 }
 
 /**
@@ -21,19 +20,33 @@ Navbar logo
     padding-right: $navbar-nav-link-padding-x;
   }
 
-  .nav-item.active .nav-link {
-    position: relative;
+  .nav-item {
+    &.active .nav-link {
+      position: relative;
 
-    &:after {
-      content: '';
-      position: absolute;
+      &:after {
+        content: '';
+        position: absolute;
 
-      bottom: subtract(-$navbar-padding-y, 1px);
-      right: $navbar-nav-link-padding-x;
-      left: $navbar-nav-link-padding-x;
-      border-bottom: 1px solid $primary;
+        bottom: -1px;
+        right: $navbar-nav-link-padding-x;
+        left: $navbar-nav-link-padding-x;
+        border-bottom: 1px solid $primary;
+      }
+    }
+
+    &:hover {
+      .dropdown-menu {
+        display: block;
+      }
     }
   }
 }
 
+.navbar-brand {
+  padding: 0;
+}
 
+.nav-link {
+
+}