top navbar fixes

pages/_includes/layout/topnav.html

@@ -1,5 +1,5 @@
-<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
+<header class="navbar navbar-expand-md">
-   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
+   {% include parts/navbar.html logo=true search=true user-menu=1 person=5 white-logo=include.dark %}
 </header>
 
 {% comment %}

pages/_includes/parts/navbar.html

@@ -3,16 +3,16 @@
 {% assign person = person[0] %}
 
 <div class="container{% if include.fluid %}-fluid{% endif %}{% if include.dark %} navbar-dark bg-dark{% endif %}">
-   <a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
+   <a class="navbar-toggler" data-toggle="modal" data-target="#aside">
-      {% include ui/icon.html icon="menu" %}
+      <span class="navbar-toggler-icon"></span>
    </a>
 
-   <a href="{{ site.base }}" class="navbar-brand text-inherit">
+   <a href="{{ site.base }}" class="navbar-brand text-inherit mr-md-3">
       {% if include.icon %}<span class="text-green">{% include 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.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
+         <img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
-         <img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
+         <img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-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 %}
    </a>
@@ -21,7 +21,7 @@
    <div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
       <div class="input-icon">
          <span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
-         <input type="text" class="form-control" placeholder="Search" tabindex="-1">
+         <input type="text" class="form-control form-control-light" placeholder="Search" tabindex="-1">
       </div>
    </div>
    {% endif %}
@@ -32,46 +32,6 @@
    </a>
    {% endif %}
 
-
-   <div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
-      {% if include.big-menu %}
-      <ul class="navbar-nav">
-         <li class="nav-item">
-            <a class="nav-link" href="#">Homepage</a>
-         </li>
-
-         <li class="nav-item dropdown">
-            <div class="dropdown">
-               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
-               <div class="dropdown-menu">
-                  <a class="dropdown-item" href="#">App Pages</a>
-                  <a class="dropdown-item" href="#">Utility Pages</a>
-                  <a class="dropdown-item" href="#">Layouts</a>
-               </div>
-            </div>
-         </li>
-
-         <li class="nav-item">
-            <div class="dropdown">
-               <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
-               <div class="dropdown-menu">
-                  <a class="dropdown-item" href="#">Bootstrap</a>
-                  <a class="dropdown-item" href="#">Pipeline</a>
-               </div>
-            </div>
-         </li>
-
-         <li class="nav-item">
-            <a class="nav-link" href="#">Documentation</a>
-         </li>
-
-         <li class="nav-item">
-            <a class="nav-link" href="#">Changelog</a>
-         </li>
-      </ul>
-      {% endif %}
-   </div>
-
    <ul class="nav navbar-menu order-1 order-lg-2">
       {% if include.fullscreen %}
       <li class="nav-item d-none d-sm-block">
@@ -123,6 +83,20 @@
       </li>
       {% endif %}
 
+      {% if include.language %}
+      <li class="nav-item dropdown">
+         <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+            <span class="flag flag-gb mr-2"></span>English
+         </a>
+         <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
+            {% for language in site.data.languages %}
+            <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
+               language.name }}</a>
+            {% endfor %}
+         </div>
+      </li>
+      {% endif %}
+
       {% if include.user-menu %}
       <li class="nav-item dropdown">
          <a href="#" data-toggle="dropdown"
@@ -205,19 +179,5 @@
          <a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
       </li>
       {% endif %}
-
-      {% if include.language %}
-      <li class="nav-item dropdown">
-         <a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-            <span class="flag flag-gb mr-2"></span>English
-         </a>
-         <div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
-            {% for language in site.data.languages %}
-            <a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
-               language.name }}</a>
-            {% endfor %}
-         </div>
-      </li>
-      {% endif %}
    </ul>
 </div>

scss/_variables.scss

@@ -11,11 +11,11 @@ $icon-fonts: (
 
 // COLORS
 $full-black: rgba(0, 0, 0, 1) !default;
-$light-black: rgba(0, 0, 0, .35) !default;
-$min-black: rgba(135, 150, 165, .1) !default;
 $full-white: rgba(255, 255, 255, 1) !default;
-$light-white: rgba(255, 255, 255, .35) !default;
+$light-black: rgba(0, 0, 0, .4) !default;
-$min-white: rgba(255, 255, 255, .1) !default;
+$light-white: rgba(255, 255, 255, .4) !default;
+$min-black: rgba(135, 150, 165, .064) !default;
+$min-white: rgba(255, 255, 255, .064) !default;
 
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;

scss/layout/_navbar.scss

@@ -41,6 +41,15 @@
   height: 2rem;
 }
 
+/**
+Navbar toggler
+ */
+.navbar-toggler-icon {
+  width: 2rem;
+  height: 2rem;
+  background: red;
+}
+
 /**
 Fixed navbar
  */
@@ -60,64 +69,6 @@ Fixed navbar
   }
 }
 
-/**
-Navbar expand
- */
-@each $breakpoint, $dimension in $grid-breakpoints {
-  .navbar-expand-#{$breakpoint} {
-    display: none;
-
-    @include media-breakpoint-up(#{$breakpoint}) {
-      display: block;
-      padding-right: 0;
-      padding-left: 0;
-
-      .navbar-nav {
-        margin-right: 0;
-        margin-left: 0;
-      }
-
-      .navbar-nav .nav-link {
-        padding: .5rem $sidenav-link-padding-x;
-
-        &.active {
-          position: relative;
-
-          &::before {
-            top: auto;
-            right: $sidenav-link-padding-x;
-            bottom: calc(-#{$navbar-padding-y} - #{$border-width});
-            left: $sidenav-link-padding-x;
-            border-bottom: 1px solid $primary;
-            border-left: 0;
-          }
-        }
-      }
-
-
-      > .container,
-      > .container-fluid {
-        padding-right: 0;
-        padding-left: 0;
-      }
-
-      &.navbar-side.navbar-fixed {
-        @include media-breakpoint-up(#{$breakpoint}) {
-          ~ .main-content {
-            margin-left: $sidenav-width;
-          }
-
-          &.navbar-right ~ .main-content {
-            margin-right: $sidenav-width;
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-
 /*
 Sidebar
  */

scss/ui/_buttons.scss

@@ -1,6 +1,10 @@
 .btn {
   letter-spacing: .03em;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
+
+  .flag {
+    vertical-align: -5px;
+  }
 }
 
 .btn-avatar {