navigations fixes

pages/_data/menu-sample.yml

@@ -2,10 +2,12 @@ first:
   url: '#'
   icon: star
   title: First
+  active: true
 
 second:
   url: '#'
   icon: star
+  badge: 2
   title: Second
 
 third:

pages/_includes/layout/navbar-menu.html

@@ -9,7 +9,7 @@
 <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
 	{% for level-1 in menu %}
 		{% assign icon = level-1[1].icon %}
-		<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
+		<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
 			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
 			   aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
 				{% unless hide-icons %}
@@ -23,6 +23,10 @@
 					{{ level-1[1].title }}
 					{% endif %}
 				</span>
+
+				{% if level-1[1].badge %}
+				<span class="badge bg-red">{{ level-1[1].badge }}</span>
+				{% endif %}
 			</a>
 
 			{% if level-1[1].children %}

pages/_includes/layout/navbar-side.html

@@ -4,6 +4,7 @@
 	<li class="nav-item nav-item-icon dropdown d-none d-md-flex mr-3">
 		<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
 			{% include ui/icon.html icon="bell" %}
+			<span class="badge bg-red"></span>
 		</a>
 		<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
 			{% include cards/navbar-notifications.html %}

pages/_includes/layout/navbar.html

 {% assign breakpoint = include.breakpoint | default: 'md' %}
 {% assign secondary = include.secondary | default: false %}
 
-<header class="navbar navbar-expand-{{ breakpoint }} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}"{% if include.background %} style="background: {{ include.background }}"{% endif %}>
+<header class="navbar navbar-expand-{{ breakpoint }} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}>
 	<div class="container-xl">
 		{% include layout/navbar-toggler.html target="navbar-menu" %}
-		{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pr-0 pr-md-3" breakpoint=breakpoint show-title=include.show-title %}
+
+		{% unless include.hide-brand %}
+			{% include layout/navbar-logo.html dark=include.dark small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pr-0 pr-md-3" breakpoint=breakpoint show-title=include.show-title %}
+		{% endunless %}
+
 		{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %}
 
 		{% unless secondary %}
@@ -14,7 +18,13 @@
 			{% else %}
 				<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
 					{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
-					{% include layout/navbar-search.html breakpoint="lg" class="flex-grow-1 flex-md-grow-0 ml-md-auto pl-md-4 mr-md-4 order-first order-md-last" dark=include.dark %}
+
+					{% assign search-class = "ml-md-auto pl-md-4 mr-md-4 order-first order-md-last flex-grow-1" %}
+					{% unless include.fluid-search %}
+						{% assign search-class = search-class | append: " flex-md-grow-0" %}
+					{% endunless %}
+
+					{% include layout/navbar-search.html breakpoint="lg" class=search-class dark=include.dark %}
 				</div>
 			{% endif %}
 		</div>

pages/navigation.html

@@ -14,14 +14,18 @@ page-header: Navigation
 	</div>
 
 	<div class="mb-3">
-		{% include layout/navbar.html sample=true dark=true small-logo=true background="#7952b3" hide-search=true person-id=4 %}
+		{% include layout/navbar.html sample=true dark=true small-logo=true background-color="#7952b3" hide-search=true person-id=4 %}
 	</div>
 
 	<div class="mb-3">
-		{% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=5 %}
+		{% include layout/navbar.html sample=true dark=true background="primary" hide-brand=true hide-icons=true fluid-search=true hide-username=true person-id=5 %}
 	</div>
 
 	<div class="mb-3">
-		{% include layout/navbar.html sample=true secondary=true dark-secondary=true person-id=6 %}
+		{% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=6 %}
+	</div>
+
+	<div class="mb-3">
+		{% include layout/navbar.html sample=true secondary=true dark=true person-id=7 %}
 	</div>
 </div>
\ No newline at end of file

scss/_variables.scss

@@ -251,6 +251,9 @@ $breadcrumb-variants: (
 ) !default;
 
 //badges
+$badge-padding-y: .125rem !default;
+$badge-padding-x: .25rem !default;
+$badge-font-size: $h6-font-size !default;
 $badge-font-weight: $font-weight-bold !default;
 $badge-empty-size: .5rem !default;
 

scss/layout/_navbar.scss

+.navbar {
+  .nav-link {
+    position: relative;
+
+    .badge {
+      position: absolute;
+      top: .375rem;
+      right: .375rem;
+      transform: translate(50%, -50%);
+    }
+  }
+}
+
+
 .navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -9,6 +23,14 @@
           position: absolute;
         }
 
+        .nav-link {
+          .badge {
+            position: static;
+            margin-left: .5rem;
+            transform: none;
+          }
+        }
+
         .navbar-collapse {
           .navbar-nav {
             width: 100%;

scss/ui/_badges.scss

@@ -2,11 +2,10 @@
   @include subheader(false);
   display: inline-flex;
   justify-content: center;
-  padding: 0 .5em;
-  line-height: 1.75em;
   background: $gray-500;
   overflow: hidden;
   vertical-align: text-bottom;
+  user-select: none;
   
   @at-root a#{&} {
     color: $white;