// Avatar + Vertical Nav WIP

admin-dev/themes/default/css/admin-theme/_admin-header.sass

@@ -9,14 +9,14 @@
 	position: relative
 	padding: 0 0 0 45px
 	margin: 0 20px 0 0
-	height: 38px
-	line-height: 38px
+	height: 37px
+	line-height: 37px
 	img
 		position: absolute
 		top: 0
 		left: 0
-		width: 38px
-		height: 38px
+		width: 37px
+		height: 37px
 #header_notifs_icon_wrapper
 	@extend .hidden-xs
 	@extend .nav
@@ -77,7 +77,37 @@
 		left: 10px
 		width: 400px
 
+#employee_infos
 	
+.employee_name
+	position: relative
+	padding-left: 34px!important
+
+.employee_avatar_small
+	height: 30px
+	width: 30px
+	display: inline-block
+	position: absolute
+	top: 4px
+	left: 0
+	img
+		width: 100%
+		height: 100%
+		@include border-radius(30px)
+
+.employee_avatar
+	height: 100px
+	width: 100px
+	display: block
+	margin: 10px auto 10px auto
+	overflow: hidden
+	@include border-radius(120px)
+	@include box-shadow(white 0 0 0 2px, #ccc 0 0 10px 3px)
+	img
+		width: 100%
+		height: 100%
+		
+
 
 #header_quick
 	@extend .nav

admin-dev/themes/default/css/admin-theme/_admin-nav.sass

@@ -126,22 +126,21 @@
 #nav-topbar
 	position: fixed
 	height: 28px
-	top: 35px
+	top: 38px
 	left: 80
 	width: 100%
 	z-index: 600
 	background-color: white
+	border-bottom: solid 1px rgba(black,0.4)
 	ul.menu
-		height: 28px
 		margin: 0
 		padding: 0
 		display: block
 		list-style: none
 		> li
-			height: 28px
 			padding: 0
 			margin: 0
-			border-right: solid 1px #aaa
+			border-right: solid 1px rgba(black,0.4)
 			list-style: none
 			position: relative
 			float: left
@@ -156,18 +155,14 @@
 					width: 15px
 					background-color: transparent
 					font-size: 18px
-				&:hover
-					text-decoration: none
-					background-color: $main-color
-					color: white
-					i
-						color: white!important
-			&.active
+			&.active, &:hover
+				background-color: $brand-primary
 				> a
+					text-decoration: none
 					color: contrast-color($main-color, white, #333, 10%)
-					background-color: $main-color
 					i
 						color: white
+
 	.menu-collapse
 		display: none
 	ul.submenu
@@ -196,8 +191,8 @@
 					background-color: white
 					border-bottom: solid 1px #eee
 					&:hover
-						color: $main-color
-						background-color: mix(white, $main-color, 90%)
+						color: white
+						background-color: $brand-primary
 						text-decoration: none
 				&:last-child a
 					border-bottom: none
@@ -223,7 +218,7 @@
 	#nav-sidebar
 		display: none
 	.page-head
-		top: 63px
+		top: 66px
 	#content
 		margin-left: 0
 		width: 100%

admin-dev/themes/default/template/header.tpl

@@ -292,18 +292,6 @@
 						});
 					{/if}
 				</script>
-
-			<!-- todo js 
-					OK - size up search field on focus
-					(?) -  prevent blank search
-					OK - dropdown menu as select
-					OK - fill input hidden field with data value from list item
-					OK - change icon in suffix
-					OK - set active on right list item
-					OK - focus input field
-					OK - change place holder
-					(?) - keep focus state when search exists
-			-->
 			</form>
 
 {if count($quick_access) > 0}
@@ -329,13 +317,15 @@
 {/if}
 				<li id="employee_infos" class="dropdown">
 					<a href='#' class="employee_name dropdown-toggle" data-toggle="dropdown">
-						<img src="{$img_dir}prestashop-avatar.png" height="15" width="15" />
+						<span class="employee_avatar_small">{$employee_avatar}</span>
 						{$first_name}&nbsp;{$last_name}
 						<i class="caret"></i>
 					</a>
 					<ul id="employee_links" class="dropdown-menu">
-						<li>{$employee_avatar}</li>
+						<li><span class="employee_avatar">{$employee_avatar}</span></li>
+						<li class="divider"></li>
 						<li><a href="{$link->getAdminLink('AdminEmployees')|escape:'htmlall':'UTF-8'}&id_employee={$employee->id}&amp;updateemployee"><i class="icon-wrench"></i> {l s='My preferences'}</a></li>
+						<li class="divider"></li>
 						<li><a id="header_logout" href="index.php?logout"><i class="icon-signout"></i> {l s='Log out'}</a></li>
 					</ul>
 				</li>