responsive navigation

pages/_data/menu-sample.yml

+first:
+  url: '#'
+  icon: star
+  title: First
+
+second:
+  url: '#'
+  icon: star
+  title: Second
+
+third:
+  url: '#'
+  icon: star
+  title: Third
+
+disabled:
+  url: '#'
+  icon: star
+  disabled: true
+  title: Disabled

pages/_includes/layout/navbar-logo.html

 {% assign prefix = include.prefix | default: 'navbar' %}
-{% assign small-logo = include.small-logo | default: false %}
 {% assign breakpoint = include.breakpoint | default: 'lg' %}
 
 <a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
-	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image{% if small-logo %} d-none d-{{ breakpoint }}-block{% endif %}">
-	{% if small-logo %}
-	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image d-{{ breakpoint }}-none">
+	{% unless include.hide-logo %}
+		{% if include.small-logo %}
+			<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
+		{% else %}
+			<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} mr-3{% endif %}">
+		{% endif %}
+	{% endunless %}
+
+	{% if include.show-title %}
+		Dashboard
 	{% endif %}
 </a>

pages/_includes/layout/navbar-menu.html

 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 {% assign hide-icons = include.hide-icons %}
 
+{% assign menu = site.data.menu %}
+{% if include.sample %}
+	{% assign menu = site.data.menu-sample %}
+{% endif %}
+
 <ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
-	{% for level-1 in site.data.menu %}
+	{% 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 %}">
 			<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 %}>
-				<span class="nav-link-icon{% if hide-icons %} d-md-none d-lg-inline-block{% endif %}">{% include ui/icon.html icon=icon %}</span>
+				{% unless hide-icons %}
+				<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
+				{% endunless %}
 
 				<span class="nav-link-title">
 					{% if include.long-titles %}

pages/_includes/layout/navbar.html

@@ -4,16 +4,16 @@
 <header class="navbar navbar-expand-{{ breakpoint }} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}"{% if include.background %} style="background: {{ include.background }}"{% endif %}>
 	<div class="container-xl">
 		{% include layout/navbar-toggler.html target="navbar-menu" %}
-		{% include layout/navbar-logo.html dark=include.dark class="d-none-navbar-horizontal" breakpoint=breakpoint %}
+		{% 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 %}
 		{% include layout/navbar-side.html class="order-md-last" hide-username=include.hide-username person-id=include.person-id %}
 
 		{% unless secondary %}
-		<div class="collapse navbar-collapse pl-0 pl-md-4" id="navbar-menu">
+		<div class="collapse navbar-collapse" id="navbar-menu">
 			{% if include.hide-search %}
-				{% include layout/navbar-menu.html hide-icons=true %}
+				{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons %}
 			{% else %}
 				<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
-					{% include layout/navbar-menu.html hide-icons=true %}
+					{% 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 %}
 				</div>
 			{% endif %}
@@ -26,7 +26,7 @@
 <div class="navbar-expand-{{ breakpoint }}">
 	<div class="navbar collapse navbar-collapse {% if include.dark-secondary %}navbar-dark{% else %}navbar-light{% endif %}" id="navbar-menu">
 		<div class="container-xl">
-			{% include layout/navbar-menu.html hide-icons=true long-titles=true %}
+			{% include layout/navbar-menu.html sample=include.sample hide-icons=include.hide-icons long-titles=true %}
 			{% include layout/navbar-search.html breakpoint=breakpoint dark=include.dark-secondary class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
 		</div>
 	</div>

pages/_layouts/default.html

@@ -5,7 +5,7 @@ layout: base
 {% assign page-header = page.page-header | default: layout.page-header %}
 
 <div class="page">
-	{% include layout/navbar.html hide-icons=true %}
+	{% include layout/navbar.html %}
 
 	{% comment %}
 	{% include layout/navbar-primary.html %}

pages/navigation.html

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

scss/_variables.scss

@@ -381,6 +381,8 @@ $navbar-dark-active-color: inherit !default;
 $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
+$navbar-brand-font-size: $h3-font-size !default;
+$navbar-brand-font-weight: 600 !default;
 
 $navbar-toggler-font-size: 1rem !default;
 $navbar-toggler-padding-x: 0 !default;

scss/layout/_navbar.scss

@@ -91,6 +91,7 @@ Navbar brand
 .navbar-brand {
   display: inline-flex;
   align-items: center;
+  font-weight: $navbar-brand-font-weight;
 }
 
 .navbar-brand-image {