From e05c415faa05966057f9055e31869d75318bcf21 Mon Sep 17 00:00:00 2001
From: chomik <codecalm@gmail.com>
Date: Fri, 23 Mar 2018 16:40:01 +0100
Subject: [PATCH] header link

---
 src/_includes/header.html                |  8 +++----
 src/assets/scss/dashboard/_dropdown.scss | 27 +++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/_includes/header.html b/src/_includes/header.html
index bc30c89a9..3d998d408 100644
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -13,7 +13,7 @@
 					<a class="nav-link icon" data-toggle="dropdown">
 						<i class="fe fe-message-square"></i>
 					</a>
-					<div class="dropdown-menu dropdown-menu-right px-4">
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
 						delectus dolore dolores maxime nesciunt qui quia totam.
 					</div>
@@ -23,20 +23,20 @@
 						<i class="fe fe-bell"></i>
 						<span class="nav-unread"></span>
 					</a>
-					<div class="dropdown-menu dropdown-menu-right px-4">
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
 						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
 						delectus dolore dolores maxime nesciunt qui quia totam.
 					</div>
 				</div>
 				<div class="dropdown ml-3">
-					<a href="#" class="nav-link" data-toggle="dropdown">
+					<a href="#" class="nav-link pr-0" data-toggle="dropdown">
 						<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
 						<span class="ml-2 d-none d-lg-block">
 							<span class="text-default">{{ user.name }} {{ user.surname }}</span>
 							<small class="text-muted d-block mt-1">Administrator</small>
 						</span>
 					</a>
-					<div class="dropdown-menu dropdown-menu-right">
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
 						<a class="dropdown-item" href="#">
 							<span>Profile</span>
 						</a>
diff --git a/src/assets/scss/dashboard/_dropdown.scss b/src/assets/scss/dashboard/_dropdown.scss
index ffec50a12..293a1ea06 100644
--- a/src/assets/scss/dashboard/_dropdown.scss
+++ b/src/assets/scss/dashboard/_dropdown.scss
@@ -8,6 +8,31 @@
 	max-width: 100%;
 }
 
+.dropdown-menu-arrow {
+	&:before {
+		position: absolute;
+		top: -6px;
+		right: 12px;
+		display: inline-block;
+		border-right: 5px solid transparent;
+		border-bottom: 5px solid $border-color;
+		border-left: 5px solid transparent;
+		border-bottom-color: rgba(0, 0, 0, 0.2);
+		content: '';
+	}
+
+	&:after {
+		position: absolute;
+		top: -5px;
+		right: 12px;
+		display: inline-block;
+		border-right: 5px solid transparent;
+		border-bottom: 5px solid #fff;
+		border-left: 5px solid transparent;
+		content: '';
+	}
+}
+
 .dropdown-toggle {
 	user-select: none;
 	cursor: pointer;
@@ -21,7 +46,7 @@
 	}
 }
 
-.dropdown-icon  {
+.dropdown-icon {
 	color: $text-muted-dark;
 	margin-right: .5rem;
 	margin-left: -.5rem;