navbar notifications

pages/_includes/cards/navbar-notifications.html

+<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

pages/_includes/layout/navbar-secondary.html

-<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>

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;

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);

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