Move user avatar and logout button to sidebar

app/assets/stylesheets/generic/common.scss

@@ -342,9 +342,8 @@ table {
 }
 
 #nprogress .spinner {
-  top: auto !important;
-  bottom: 20px !important;
-  left: 20px !important;
+  top: 15px !important;
+  right: 10px !important;
 }
 
 .header-with-avatar {

app/assets/stylesheets/generic/header.scss

@@ -13,7 +13,7 @@ header {
     .container {
       width: 100% !important;
       padding: 0;
-
+      padding-right: 35px;
       background: #FFF;
       border-bottom: 1px solid #EEE;
       filter: none;
@@ -62,13 +62,21 @@ header {
       }
 
       .nav > li > a {
-        color: #666;
+        color: #888;
         font-size: 14px;
-        line-height: 32px;
-        padding: 6px 10px;
+        line-height: 19px;
+        padding: 0;
+        background-color: #f5f5f5;
+        margin: 9px 0;
+        margin-left: 10px;
+        border-radius: 40px;
+        height: 26px;
+        width: 26px;
+        line-height: 26px;
+        text-align: center;
 
         &:hover, &:focus, &:active {
-          background: none;
+          background-color: #EEE;
         }
       }
 
@@ -150,17 +158,6 @@ header {
     }
   }
 
-  .profile-pic {
-    padding: 0px !important;
-    width: 46px;
-    height: 46px;
-    margin-left: 5px;
-    img {
-      width: 46px;
-      height: 46px;
-    }
-  }
-
   /**
    *
    * Search box
@@ -184,6 +181,8 @@ header {
       padding: 4px 6px;
       padding-left: 25px;
       font-size: 13px;
+      background-color: #f5f5f5;
+      border-color: #f5f5f5;
     }
   }
 }

app/assets/stylesheets/generic/sidebar.scss

@@ -127,6 +127,20 @@
       left: 0px;
       width: 52px;
     }
+
+    .sidebar-user {
+      .username {
+        display: none;
+      }
+
+      .avatar {
+        margin-bottom: 10px;
+      }
+
+      .logout-holder {
+        text-align: center;
+      }
+    }
   }
 }
 
@@ -170,3 +184,15 @@
     @include expanded-sidebar;
   }
 }
+
+.sidebar-user {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  color: #fff;
+
+  .avatar {
+    margin-top: 5px;
+  }
+}

app/assets/stylesheets/themes/gitlab-theme.scss

@@ -29,6 +29,12 @@
     .sidebar-wrapper {
       background: $color-darker;
       border-right: 1px solid $color-darker;
+
+      .sidebar-user {
+        a {
+          color: $color-light;
+        }
+      }
     }
 
     .nav-sidebar li {

app/views/layouts/_head_panel.html.haml

@@ -38,11 +38,5 @@
         %li
           = link_to profile_path, title: 'Profile settings', data: {toggle: 'tooltip', placement: 'bottom'} do
             = icon('user')
-        %li
-          = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom'} do
-            = icon('sign-out')
-        %li.hidden-xs
-          = link_to current_user, class: 'profile-pic', id: 'profile-pic', data: {toggle: 'tooltip', placement: 'bottom'} do
-            = image_tag avatar_icon(current_user.email, 60), alt: 'User activity'
 
 = render 'shared/outdated_browser'

app/views/layouts/_page.html.haml

@@ -7,6 +7,15 @@
       = render 'layouts/nav/dashboard'
     .collapse-nav
       = render partial: 'layouts/collapse_button'
+    - if current_user
+      .sidebar-user
+        = link_to current_user, class: 'profile-pic', id: 'profile-pic', data: {toggle: 'tooltip', placement: 'top'} do
+          = image_tag avatar_icon(current_user.email, 60), alt: 'User activity', class: 'avatar avatar s32'
+        .username
+          = current_user.username
+        .logout-holder
+          = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'top'} do
+            = icon('sign-out')
   .content-wrapper
     .container-fluid
       .content