6 files changed, 48 insertions, 25 deletions
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index bf4fb8f..ec03874 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -2,7 +2,16 @@
   <!-- HEADER -->
   <div class="header__info-section">
     <span class="header__title">OpenBMC</span>
-    <a href="" class="header__logout" ng-click="logout()">Log out</a>
+    <div class="header__actions" uib-dropdown>
+      <button id="user-actions" type="button" uib-dropdown-toggle>
+        <icon class="icon-user" file="icon-avatar.svg"></icon>
+        {{username}}
+      </button>
+      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="user-actions">
+        <li role="menuitem"><a href="#/profile-settings" class="btn">Profile settings</a></li>
+        <li role="menuitem"><button ng-click="logout()" type="button" class="btn">Log out</button></li>
+      </ul>
+    </div>
   </div>
   <div class="header__functions-section">
     <div class="logo__wrapper">
diff --git a/app/common/directives/app-header.js b/app/common/directives/app-header.js
index 98d210f..df39772 100644
--- a/app/common/directives/app-header.js
+++ b/app/common/directives/app-header.js
@@ -14,6 +14,7 @@ window.angular && (function(angular) {
           function(
               $rootScope, $scope, dataService, userModel, $location, $route) {
             $scope.dataService = dataService;
+            $scope.username = '';
 
             try {
               // Create a secure websocket with URL as /subscribe
@@ -118,6 +119,7 @@ window.angular && (function(angular) {
               $scope.loadNetworkInfo();
               $scope.loadServerHealth();
               $scope.loadSystemName();
+              $scope.username = dataService.getUser();
             }
 
             loadData();
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index c775c48..6699d44 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,3 +1,4 @@
+.label,
 label,
 legend {
   margin: 0;
diff --git a/app/common/styles/directives/dropdown.scss b/app/common/styles/directives/dropdown.scss
new file mode 100644
index 0000000..0c0add0
--- /dev/null
+++ b/app/common/styles/directives/dropdown.scss
@@ -0,0 +1,5 @@
+.dropdown.open {
+  .dropdown-menu {
+    display: block;
+  }
+}
+\ No newline at end of file
diff --git a/app/common/styles/directives/index.scss b/app/common/styles/directives/index.scss
index 5d9de6f..1fcbb65 100644
--- a/app/common/styles/directives/index.scss
+++ b/app/common/styles/directives/index.scss
@@ -1 +1,2 @@
-@import "./app-navigation.scss";
-\ No newline at end of file
+@import "./app-navigation.scss";
+@import "./dropdown.scss";
+\ No newline at end of file
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index c034c82..b1665ca 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -21,37 +21,42 @@ $logoMaxWidth: 125px;
   z-index: 300;
 }
 
-.header__title {
-  margin-left: 1em;
-  display: none;
-  float: left;
-  @include mediaQuery(x-small) {
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
 .header__info-section {
   position: relative;
   background: $primary-dark;
   color: $primary-light;
-  overflow: hidden;
-}
-
-.header__logout {
-  float: right;
-  color: $primary-light;
-  font-size: 0.9em;
-  text-decoration: none;
-  padding: 1em;
-  font-weight: 400;
-  &:visited {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  .dropdown-menu {
+    left: unset;
+    right: 0;
+    border-radius: 0;
+    font-size: 0.9rem;
+    .btn {
+      color: $primary-dark;
+    }
+  }
+  .dropdown-toggle {
     color: $primary-light;
+    fill: $primary-light;
+    text-decoration: none;
+    font-weight: 400;
+    margin-right: 0.5rem;
+    height: 50px; //to vertically align in 50px header
+    &::after {
+      display: none; //hiding dropdown caret inserted by bootstrap
+    }
   }
 }
 
+.header__title {
+  margin-left: 1rem;
+  display: block;
+  line-height: 50px; //to vertically align in 50px header
+}
+
 .header__functions-section {
   color: $primary-light;
   padding: 0 1.1em;