From 8b585ee1d133c13349d6a9e775dfa02b6d8f3d4c Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 4 Apr 2020 17:07:33 +0200
Subject: [PATCH] responsive navbars

---
 pages/_includes/layout/navbar-logo.html      |  5 +-
 pages/_includes/layout/navbar-menu.html      |  8 ++-
 pages/_includes/layout/navbar-secondary.html | 40 ------------
 pages/_includes/layout/navbar-side.html      | 22 +++++++
 pages/_includes/layout/navbar-toggler.html   |  3 +
 pages/_includes/layout/navbar.html           | 13 ++++
 pages/_includes/layout/topnav.html           |  5 ++
 pages/_layouts/base.html                     |  3 +-
 pages/_layouts/default.html                  |  6 ++
 scss/_variables.scss                         | 56 ++++++++++++-----
 scss/layout/_navbar.scss                     | 66 ++++++++++++++++++++
 scss/ui/_nav.scss                            | 19 +++++-
 12 files changed, 182 insertions(+), 64 deletions(-)
 create mode 100644 pages/_includes/layout/navbar-side.html
 create mode 100644 pages/_includes/layout/navbar-toggler.html
 create mode 100644 pages/_includes/layout/navbar.html
 create mode 100644 pages/_includes/layout/topnav.html

diff --git a/pages/_includes/layout/navbar-logo.html b/pages/_includes/layout/navbar-logo.html
index c1bb8a57..c22582fe 100644
--- a/pages/_includes/layout/navbar-logo.html
+++ b/pages/_includes/layout/navbar-logo.html
@@ -1,6 +1,7 @@
 {% assign prefix = include.prefix | default: 'navbar' %}
+{% 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="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
-	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
+	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image d-none d-{{ breakpoint }}-block">
+	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-image d-{{ breakpoint }}-none">
 </a>
diff --git a/pages/_includes/layout/navbar-menu.html b/pages/_includes/layout/navbar-menu.html
index a42acbeb..6f2f7290 100644
--- a/pages/_includes/layout/navbar-menu.html
+++ b/pages/_includes/layout/navbar-menu.html
@@ -1,9 +1,9 @@
 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
 
-<ul class="navbar-nav">
+<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
 	{% 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 %}">
+		<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">{% include ui/icon.html icon=icon %}</span>
@@ -11,7 +11,7 @@
 			</a>
 
 			{% if level-1[1].children %}
-			<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns  dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
+			<ul class="dropdown-menu{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns  dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
 				{% for level-2 in level-1[1].children %}
 				<li {% if level-2[1].children %}class="dropright"{% endif %}>
 					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% 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 %}>
@@ -32,10 +32,12 @@
 		</li>
 	{% endfor %}
 
+	{% comment %}
 	<li class="nav-item d-none-navbar-vertical">
 		<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
 			<span class="nav-link-icon">{% include ui/icon.html icon="adjustments" %}</span>
 			<span class="nav-link-title">Customize</span>
 		</a>
 	</li>
+	{% endcomment %}
 </ul>
\ No newline at end of file
diff --git a/pages/_includes/layout/navbar-secondary.html b/pages/_includes/layout/navbar-secondary.html
index 6a4814f2..0d23ce3e 100644
--- a/pages/_includes/layout/navbar-secondary.html
+++ b/pages/_includes/layout/navbar-secondary.html
@@ -6,47 +6,7 @@
 			{% include ui/form/input-icon.html prepend=true input-class="form-control-flush w-100" class="w-100" %}
 		</form>
 
-		<ul class="navbar-nav ml-auto">
-			<li class="nav-item dropdown">
-				<a href="#" class="nav-link px-0" data-toggle="dropdown">
-					{% include ui/icon.html icon="settings" %}
-				</a>
-				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
-			</li>
 
-			<li class="nav-item dropdown">
-				<a href="#" class="nav-link" data-toggle="dropdown">
-					{% include ui/flag.html flag="us" class="mr-1" %}
-					<span class="d-none d-lg-inline">English</span>
-				</a>
-				<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-					<a href="#" class="dropdown-item">{% include ui/flag.html flag="de" class="mr-1" %} German</a>
-					<a href="#" class="dropdown-item">{% include ui/flag.html flag="pl" class="mr-1" %} Polish</a>
-					<a href="#" class="dropdown-item">{% include ui/flag.html flag="jp" class="mr-1" %} Japan</a>
-					<a href="#" class="dropdown-item">{% include ui/flag.html flag="ru" class="mr-1" %} Russian</a>
-				</div>
-			</li>
-
-			<li class="nav-item dropdown">
-				<a href="#" class="nav-link px-0" data-toggle="dropdown">
-					{% include ui/icon.html icon="bell" %}
-				</a>
-				<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-					{% include cards/navbar-notifications.html %}
-				</div>
-			</li>
-
-			<li class="nav-item dropdown pl-3">
-				<a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-					{% include ui/avatar.html person-id=1 %}
-					<div class="d-none d-lg-block pl-2">
-						<div>Paweł Kuna</div>
-						<div class="mt-1 small text-muted">Founder</div>
-					</div>
-				</a>
-				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
-			</li>
-		</ul>
 	</div>
 </nav>
 
diff --git a/pages/_includes/layout/navbar-side.html b/pages/_includes/layout/navbar-side.html
new file mode 100644
index 00000000..6f55eebd
--- /dev/null
+++ b/pages/_includes/layout/navbar-side.html
@@ -0,0 +1,22 @@
+<ul class="navbar-nav flex-row">
+
+	<li class="nav-item dropdown">
+		<a href="#" class="nav-link px-0" data-toggle="dropdown">
+			{% include ui/icon.html icon="bell" %}
+		</a>
+		<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+			{% include cards/navbar-notifications.html %}
+		</div>
+	</li>
+
+	<li class="nav-item dropdown">
+		<a href="#" class="nav-link d-flex lh-1 text-reset py-0" data-toggle="dropdown">
+			{% include ui/avatar.html person-id=1 %}
+			<div class="d-none d-lg-block pl-2">
+				<div>Paweł Kuna</div>
+				<div class="mt-1 small text-muted">Founder</div>
+			</div>
+		</a>
+		{% include ui/dropdown-menu.html right=true icons=true separated=true %}
+	</li>
+</ul>
\ No newline at end of file
diff --git a/pages/_includes/layout/navbar-toggler.html b/pages/_includes/layout/navbar-toggler.html
new file mode 100644
index 00000000..75beffe5
--- /dev/null
+++ b/pages/_includes/layout/navbar-toggler.html
@@ -0,0 +1,3 @@
+<button class="navbar-toggler" type="button" data-toggle="collapse"{% if include.target %} data-target="#{{ include.target }}"{% endif %}>
+	<span class="navbar-toggler-icon"></span>
+</button>
\ No newline at end of file
diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html
new file mode 100644
index 00000000..0cb8eb31
--- /dev/null
+++ b/pages/_includes/layout/navbar.html
@@ -0,0 +1,13 @@
+{% assign breakpoint = include.breakpoint | default: 'md' %}
+<nav class="navbar navbar-expand-{{ breakpoint }} {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.background %} bg-{{ 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 %}
+
+		<div class="collapse navbar-collapse" id="navbar-menu">
+			{% include layout/navbar-menu.html class="ml-lg-5" %}
+		</div>
+
+		{% include layout/navbar-side.html %}
+	</div>
+</nav>
\ No newline at end of file
diff --git a/pages/_includes/layout/topnav.html b/pages/_includes/layout/topnav.html
new file mode 100644
index 00000000..6926a84c
--- /dev/null
+++ b/pages/_includes/layout/topnav.html
@@ -0,0 +1,5 @@
+<div class="navbar navbar-expand-lg navbar-dark bg-dark text-white">
+	<div class="container">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, consectetur cupiditate dicta dolore eum, nesciunt nobis optio quibusdam quidem sed similique suscipit, veniam. Aperiam fugit odit recusandae repudiandae rerum vitae.
+	</div>
+</div>
\ No newline at end of file
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index 1be5de91..bc91160b 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -51,8 +51,9 @@
 
 	{% include layout/modals-capture.html %}
 
-	{% comment %}
 	{% include layout/js.html %}
+
+	{% comment %}
 	{% include layout/js-capture.html %}
 
 	{% if site.debug and jekyll.environment == 'development' %}
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 67752a65..704b7696 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -5,6 +5,12 @@ layout: base
 {% assign page-header = page.page-header | default: layout.page-header %}
 
 <div class="page">
+	{% include layout/navbar.html dark=true %}
+	{% include layout/navbar.html dark=true background="blue" %}
+	{% include layout/navbar.html %}
+
+	{% comment %}{% include layout/topnav.html %}{% endcomment %}
+
 	{% comment %}
 	{% include layout/navbar-primary.html %}
 	{% include layout/navbar-secondary.html %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5468d85a..a56b65b5 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -364,29 +364,51 @@ $modal-md: 540px !default;
 $modal-sm: 380px !default;
 
 //navbar
-$navbar-padding-y: .5rem !default;
 $navbar-height: 3.5rem !default;
-$navbar-border-color: $border-color !default;
+$navbar-padding-y: .25rem !default;
+
+$navbar-light-brand-color: inherit !default;
+$navbar-light-active-color: inherit !default;
+$navbar-dark-brand-color: inherit !default;
+$navbar-dark-active-color: inherit !default;
+
+$navbar-brand-padding-y: 0 !default;
+$navbar-brand-image-height: 2rem !default;
+$navbar-brand-margin-right: 0 !default;
 
-$navbar-toggler-padding-y: .75rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-margin: -.75rem !default;
 $navbar-toggler-font-size: 1rem !default;
-$navbar-toggler-size: 1.5rem !default;
-$navbar-toggler-item-height: 2px !default;
-$navbar-toggler-item-spacing: 7px !default;
-$navbar-toggler-transform-time: .2s !default;
-
-//sidenav
-$navbar-vertical-width: 15.625rem !default;
-$navbar-vertical-narrow-width: 4rem !default;
-$navbar-vertical-dark-bg: $dark !default;
-$navbar-vertical-dark-color: $white !default;
-$navbar-vertical-padding: 1rem !default;
-$navbar-vertical-active-accent-color: $primary !default;
+$navbar-toggler-padding-x: 0 !default;
+$navbar-toggler-padding-y: 0 !default;
+$navbar-light-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-justified" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="' + $body-color + '" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></svg>') !default;
+$navbar-dark-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-align-justified" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="' + $white + '" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></svg>') !default;
 
+//nav
+$navbar-nav-link-padding-y: .25rem !default;
 $navbar-nav-link-padding-x: .75rem !default;
 
+//$navbar-padding-y: .5rem !default;
+//$navbar-height: 3.5rem !default;
+//$navbar-border-color: $border-color !default;
+//
+//$navbar-toggler-padding-y: .75rem !default;
+//$navbar-toggler-padding-x: .75rem !default;
+//$navbar-toggler-margin: -.75rem !default;
+//$navbar-toggler-font-size: 1rem !default;
+//$navbar-toggler-size: 1.5rem !default;
+//$navbar-toggler-item-height: 2px !default;
+//$navbar-toggler-item-spacing: 7px !default;
+//$navbar-toggler-transform-time: .2s !default;
+//
+////sidenav
+//$navbar-vertical-width: 15.625rem !default;
+//$navbar-vertical-narrow-width: 4rem !default;
+//$navbar-vertical-dark-bg: $dark !default;
+//$navbar-vertical-dark-color: $white !default;
+//$navbar-vertical-padding: 1rem !default;
+//$navbar-vertical-active-accent-color: $primary !default;
+//
+//$navbar-nav-link-padding-x: .75rem !default;
+
 //popover
 $popover-border-color: $border-color !default;
 
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index e995bccf..508d3445 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -1,3 +1,69 @@
+/**
+Navbar
+ */
+.navbar {
+  box-shadow: 0 0 0 1px $border-color;
+  background-color: $white;
+  height: $navbar-height;
+
+  .navbar-nav {
+    height: subtract($navbar-height, 2 * $navbar-padding-y);
+
+    .nav-link {
+      min-width: 2.5rem;
+    }
+  }
+}
+
+/**
+Navbar brand
+ */
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navbar-brand-image {
+  display: block;
+  height: $navbar-brand-image-height;
+}
+
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+  border: 0;
+  width: $navbar-brand-image-height;
+  height: $navbar-brand-image-height;
+}
+
+/**
+Navbar dark
+ */
+.navbar-dark {
+  color: $white;
+  background-color: $dark;
+  box-shadow: none;
+
+  .text-muted {
+    color: $navbar-dark-color !important;
+  }
+}
+
+
+.navbar-collapse {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+.navbar-nav {
+  align-items: stretch;
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+  }
+}
 
 
 ///*
diff --git a/scss/ui/_nav.scss b/scss/ui/_nav.scss
index baec75e1..ae61b0be 100644
--- a/scss/ui/_nav.scss
+++ b/scss/ui/_nav.scss
@@ -50,7 +50,24 @@
 }
 
 .nav-link {
+  border-radius: $border-radius;
   display: flex;
-  align-items: center;
   transition: .3s color;
+  align-items: center;
+
+  .icon {
+    display: inline-block;
+    font-size: 1rem;
+  }
 }
+
+.nav-link-icon {
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+  margin-right: .25rem;
+
+  .icon {
+    display: block;
+  }
+}
\ No newline at end of file
-- 
GitLab