Profile dropdown menu

Author: Davidtiger92

src/app/_common/header/nav/profile/profile.hbs

@@ -1,7 +1,7 @@
 {{!-- Profile --}}
 
 <li class="profile dropdown">
-	<a href="" data-toggle="dropdown">
+	<!--<a href="" data-toggle="dropdown">
 		<div class="img" style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')">
 			 
 		</div>
@@ -13,34 +13,64 @@
 		<span class="arrow">
 			<i class="fa fa-angle-down"></i>
 		</span>
-	</a>
+	</a>-->
 
-	<ul class="dropdown-menu profile-dropdown-menu">
+	
+		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+			<div class="img" style="background-image: url('https://avatars3.githubusercontent.com/u/3959008?v=3&s=40')">
+			
+			</div>
+			<span class="name">
+				John Doe
+			</span>
+    	</a>
+	  	<div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
+			<a class="dropdown-item" href="#">
+				<i class="fa fa-user icon"></i>
+				Profile
+			</a>
+			<a class="dropdown-item" href="#">
+				<i class="fa fa-bell icon"></i>
+				Notifications
+			</a>
+			<a class="dropdown-item" href="#">
+				<i class="fa fa-gear icon"></i>
+				Settings
+			</a>
+			<div class="dropdown-divider" style="margin: 0;"></div>
+			<a class="dropdown-item" href="#">
+				<i class="fa fa-power-off icon"></i>
+				Logout
+			</a>			
+    	</div>
+
+
+	<!--<ul class="dropdown-menu profile-dropdown-menu">
 		<li>
 			<a href="">
-				<i class="fa fa-user"></i>
+				<i class="fa fa-user icon"></i>
 				<span>Profile</span>
 			</a>
 		</li>
 		<li>
 			<a href="">				
-				<i class="fa fa-bell"></i>
+				<i class="fa fa-bell icon"></i>
 				<span>Notifications</span>
 			</a>
 		</li>
 		<li>
 			<a href="">
-				<i class="fa fa-gear"></i>
+				<i class="fa fa-gear icon"></i>
 				<span>Settings</span>
 			</a>
 		</li>
 		<li class="divider"></li>
 		<li class="logout">
 			<a href="login.html">
-				<i class="fa fa-power-off"></i>
+				<i class="fa fa-power-off icon"></i>
 				<span>Logout</span>
 			</a>
 		</li>
-	</ul>
+	</ul>-->
 
 </li>

src/app/_common/header/nav/profile/profile.scss

@@ -61,14 +61,19 @@
 		}
 
 
-		li a {
+		a {
 			padding: 10px 15px;
 
-			i {
+			.icon {
 				color: $color-primary;
+				text-align: center;
+				width: 16px;
 			}
 
 			span {
+				display: inline-block;
+				padding-left: 5px;
+				text-align: left;
 				color: $color-text-light;
 			}