From 22aa83bf3093716f89eb08fd52d5629f99fab8d6 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 19 Feb 2020 20:09:45 +0100
Subject: [PATCH] navbar notifications

---
 .../_includes/cards/navbar-notifications.html |  5 ++++
 pages/_includes/layout/navbar-secondary.html  | 30 ++++++++++++++++++-
 scss/_variables.scss                          | 13 ++++----
 scss/layout/_navbar.scss                      |  8 +++--
 scss/ui/_dropdowns.scss                       |  4 +--
 5 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 pages/_includes/cards/navbar-notifications.html

diff --git a/pages/_includes/cards/navbar-notifications.html b/pages/_includes/cards/navbar-notifications.html
new file mode 100644
index 000000000..4e2e67065
--- /dev/null
+++ b/pages/_includes/cards/navbar-notifications.html
@@ -0,0 +1,5 @@
+<div class="card">
+	<div class="card-body">
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+	</div>
+</div>
\ No newline at end of file
diff --git a/pages/_includes/layout/navbar-secondary.html b/pages/_includes/layout/navbar-secondary.html
index a947f5b07..afb9a9c74 100644
--- a/pages/_includes/layout/navbar-secondary.html
+++ b/pages/_includes/layout/navbar-secondary.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-light navbar-secondary navbar-expand-md" id="navbar-secondary">
+<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
 	<div class="container">
 		{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
 
@@ -8,6 +8,34 @@
 
 		<ul class="navbar-nav ml-auto">
 			<li class="nav-item dropdown">
+				<a class="nav-link" data-toggle="dropdown" href="#">
+					{% 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 class="nav-link" data-toggle="dropdown" href="#">
+					{% include ui/flag.html flag="us" class="mr-1" %} English
+				</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 class="nav-link" data-toggle="dropdown" href="#">
+					{% 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-2">
 				{% include ui/avatar.html person-id=1 dropdown=true %}
 				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
 			</li>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index ac58e0edc..cd7ba63c3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -165,11 +165,11 @@ $spacers: (
   1: $spacer * .25,
   2: $spacer * .5,
   3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-  6: $spacer * 6,
-  7: $spacer * 9,
-  8: $spacer * 12,
+  4: $spacer * 1.25,
+  5: $spacer * 1.5,
+  6: $spacer * 3,
+  7: $spacer * 6,
+  8: $spacer * 9,
 ) !default;
 
 $size-spacers: (
@@ -303,6 +303,7 @@ $dropdown-padding-y: .5rem !default;
 $dropdown-link-hover-bg: $hover-bg !default;
 $dropdown-link-hover-color: inherit !default;
 $dropdown-spacer: 1px !default;
+$dropdown-min-width: 12rem !default;
 
 $dropdown-link-active-color: $primary !default;
 $dropdown-link-active-bg: $active-bg !default;
@@ -371,7 +372,7 @@ $footer-border-color: $border-color !default;
 //$nav-link-padding-y: 1rem !default;
 
 $navbar-padding-y: .75rem !default;
-$navbar-nav-link-padding-x: .75rem !default;
+$navbar-nav-link-padding-x: .5rem !default;
 
 $navbar-light-color: rgba($body-color, .64) !default;
 $navbar-light-active-color: $primary !default;
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 5af0e1a09..2ee764d23 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -263,6 +263,7 @@ All navbars
 .navbar {
   padding-top: 0;
   padding-bottom: 0;
+  min-height: $navbar-height;
 
   @media print {
     display: none;
@@ -270,8 +271,11 @@ All navbars
   }
 
   .nav-link {
-    min-height: $navbar-height;
+    line-height: 1;
+    min-width: 2rem;
+    min-height: 2rem;
     position: relative;
+    text-align: center;
   }
 
   .nav-link-icon {
@@ -288,7 +292,7 @@ All navbars
   @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
     &-#{$breakpoint} {
       @include media-breakpoint-up($breakpoint) {
-        min-height: $navbar-height;
+
 
         .navbar-nav {
           margin-left: (-$navbar-nav-link-padding-x);
diff --git a/scss/ui/_dropdowns.scss b/scss/ui/_dropdowns.scss
index 596f7b131..899b51430 100644
--- a/scss/ui/_dropdowns.scss
+++ b/scss/ui/_dropdowns.scss
@@ -15,7 +15,7 @@
 }
 
 .dropdown-item {
-  min-width: 12rem;
+  min-width: $dropdown-min-width;
   color: inherit;
   display: flex;
   align-items: center;
@@ -106,10 +106,10 @@
 
 .dropdown-menu-card {
   padding: 0;
-  border: 0;
 
   >.card {
     margin: 0;
+    border: 0;
     box-shadow: none;
   }
 }
\ No newline at end of file