Merge branch '18013-compact-sidebar' into 'master'

Implement compact side nav

## What does this MR do?
Implements new compact nav design   
Note- new navbar icons are in a separate MR (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/4268)

## What are the relevant issue numbers?
Closes #18013 

## Screenshots (if relevant)
![Screen_Shot_2016-06-02_at_3.20.37_PM](/uploads/d31bd17ae47743f1a20d7429b4396e84/Screen_Shot_2016-06-02_at_3.20.37_PM.png)   
![Screen_Shot_2016-06-02_at_3.20.43_PM](/uploads/d03a080a57707b6a2161127f3904fcd5/Screen_Shot_2016-06-02_at_3.20.43_PM.png)

cc @dzaporozhets 

See merge request !4447

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

@@ -89,8 +89,11 @@
   }
 }
 
-$theme-blue: #2980b9;
 $theme-charcoal: #3d454d;
+$theme-charcoal-dark: #383f45;
+$theme-charcoal-text: #b9bbbe;
+
+$theme-blue: #2980b9;
 $theme-graphite: #666;
 $theme-gray: #373737;
 $theme-green: #019875;
@@ -102,7 +105,7 @@ body {
   }
 
   &.ui_charcoal {
-    @include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41);
+    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
   }
 
   &.ui_graphite {

app/assets/stylesheets/framework/header.scss

@@ -79,6 +79,10 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
+
+      .side-nav-toggle {
+        display: block;
+      }
     }
 
     .side-nav-toggle {
@@ -86,6 +90,7 @@ header {
       position: absolute;
       left: -10px;
       margin: 6px 0;
+      font-size: 18px;
       padding: 6px 10px;
       border: none;
       background-color: $background-color;
@@ -97,10 +102,6 @@ header {
       &:focus {
         outline: none;
       }
-
-      @media (max-width: $screen-xs-min) {
-        display: block;
-      }
     }
   }
 
@@ -171,31 +172,21 @@ header {
   }
 }
 
-@mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
-}
-
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    @include collapsed-header;
-  }
+  margin-left: 0;
 
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: 30px;
+    transition-duration: .3s;
   }
 }
 
 .header-expanded {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 0;
 
-  @media (min-width: $screen-md-min) {
-    margin-left: $sidebar_width;
-  }
-
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: $sidebar_width;
+    transition-duration: .3s;
   }
 }
 

app/assets/stylesheets/framework/sidebar.scss

-#logo {
-  z-index: 2;
-  position: absolute;
-  width: 58px;
-  cursor: pointer;
-  margin-top: 8px;
-}
-
 .page-with-sidebar {
   padding-top: $header-height;
   transition-duration: .3s;
@@ -20,12 +12,6 @@
     height: 100%;
     transition-duration: .3s;
   }
-
-  .gitlab-text-container-link {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-  }
 }
 
 .sidebar-wrapper {
@@ -50,47 +36,8 @@
 
 .sidebar-wrapper {
   .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
     height: $header-height;
-    width: $sidebar_width;
-    position: fixed;
-    z-index: 999;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding-left: 22px;
-      overflow: hidden;
-      outline: none;
-      transition-duration: .3s;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 50px;
-          font-size: 19px;
-          line-height: 50px;
-          font-weight: normal;
-        }
-      }
-    }
+    padding: 8px 26px;
 
     &:hover {
       background-color: #eee;
@@ -98,7 +45,7 @@
   }
 
   .sidebar-user {
-    padding: 7px 22px;
+    padding: 15px 22px;
     position: fixed;
     bottom: 40px;
     width: $sidebar_width;
@@ -126,8 +73,7 @@
 
 
 .nav-sidebar {
-  margin-top: 14 + $header-height;
-  margin-bottom: 100px;
+  margin: 22px 0;
   transition-duration: .3s;
   list-style: none;
   overflow: hidden;
@@ -145,13 +91,12 @@
     }
 
     a {
-      padding: 7px 15px;
+      text-align: center;
+      padding: 8px;
       font-size: $gl-font-size;
-      line-height: 24px;
       color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -166,14 +111,12 @@
       i {
         width: 16px;
         color: $gray-light;
-        margin-right: 13px;
       }
 
-      .count {
-        float: right;
-        background: #eee;
-        padding: 0 8px;
-        @include border-radius(6px);
+      .nav-link-text {
+        margin-top: 3px;
+        font-size: 13px;
+        line-height: 18px;
       }
 
       &.back-link i {
@@ -217,25 +160,13 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (max-width: $screen-xs-min) {
-    padding-left: 0;
-  }
+  padding-left: 0;
 
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      width: 0;
-    }
+    width: 0;
 
     .header-logo {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
+      width: 0;
 
       a {
         padding-left: ($sidebar_collapsed_width - 36) / 2;
@@ -246,6 +177,10 @@
       }
     }
 
+    #logo {
+      display: none;
+    }
+
     .nav-sidebar {
       width: $sidebar_collapsed_width;
 
@@ -261,44 +196,23 @@
     }
 
     .collapse-nav a {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
+      width: 0;
     }
 
     .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-        padding-left: 0;
-        padding-right: 0;
-      }
+      width: 0;
+      padding-left: 0;
+      padding-right: 0;
 
       .username {
         display: none;
       }
     }
   }
-
-  .layout-nav {
-    padding-right: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
-    }
-  }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    padding-left: $sidebar_width;
-  }
+  padding-left: $sidebar_width;
 
   @media (max-width: $screen-xs-min) {
     padding-left: 0;
@@ -328,7 +242,7 @@
     }
 
     @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
-      padding-right: 62px;
+      padding-right: 90px;
     }
 
     @media (min-width: $screen-md-min) {

app/assets/stylesheets/framework/variables.scss

@@ -2,7 +2,7 @@
  * Layout
  */
 $sidebar_collapsed_width: 62px;
-$sidebar_width: 220px;
+$sidebar_width: 90px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;

app/views/layouts/_page.html.haml

 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    .header-logo
-      %a#logo
-        = brand_header_logo
-      = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
-        .gitlab-text-container
-          %h3 GitLab
+    = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
+      .header-logo
+        #logo
+          = brand_header_logo
 
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
@@ -17,10 +15,8 @@
     .collapse-nav
       = render partial: 'layouts/collapse_button'
     - if current_user
-      = link_to current_user, class: 'sidebar-user', title: "Profile" do
-        = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
-        .username
-          = current_user.username
+      = link_to current_user, class: 'sidebar-user', title: "Profile", data: {user: current_user.username} do
+        = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46'
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid

app/views/layouts/nav/_dashboard.html.haml

@@ -2,54 +2,50 @@
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
       = icon('bookmark fw')
-      %span
+      .nav-link-text
         Projects
   = nav_link(controller: :todos) do
     = link_to dashboard_todos_path, title: 'Todos' do
       = icon('bell fw')
-      %span
+      .nav-link-text
         Todos
-        %span.count.todos-pending-count= number_with_delimiter(todos_pending_count)
   = nav_link(path: 'dashboard#activity') do
     = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
       = icon('dashboard fw')
-      %span
+      .nav-link-text
         Activity
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
-      %span
+      .nav-link-text
         Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
       = icon('clock-o fw')
-      %span
+      .nav-link-text
         Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
       = icon('exclamation-circle fw')
-      %span
+      .nav-link-text
         Issues
-        %span.count= number_with_delimiter(current_user.assigned_open_issues_count)
   = nav_link(path: 'dashboard#merge_requests') do
     = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
       = icon('tasks fw')
-      %span
+      .nav-link-text
         Merge Requests
-        %span.count= number_with_delimiter(current_user.assigned_open_merge_request_count)
   = nav_link(controller: :snippets) do
     = link_to dashboard_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
-      %span
+      .nav-link-text
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
-      %span
+      .nav-link-text
         Help
-
   = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')
-      %span
+      .nav-link-text
         Profile Settings

features/steps/dashboard/todos.rb

@@ -26,7 +26,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
   end
 
   step 'I should see todos assigned to me' do
-    page.within('.nav-sidebar') { expect(page).to have_content 'Todos 4' }
     expect(page).to have_content 'To do 4'
     expect(page).to have_content 'Done 0'
 
@@ -42,7 +41,6 @@ class Spinach::Features::DashboardTodos < Spinach::FeatureSteps
       click_link 'Done'
     end
 
-    page.within('.nav-sidebar') { expect(page).to have_content 'Todos 3' }
     expect(page).to have_content 'To do 3'
     expect(page).to have_content 'Done 1'
     should_not_see_todo "John Doe assigned you merge request #{merge_request.to_reference}"

spec/features/admin/admin_users_spec.rb

@@ -144,8 +144,8 @@ describe "Admin::Users", feature: true  do
         before { click_link 'Impersonate' }
 
         it 'logs in as the user when impersonate is clicked' do
-          page.within '.sidebar-user .username' do
-            expect(page).to have_content(another_user.username)
+          page.within '.sidebar-wrapper' do
+            expect(page.find('.sidebar-user')['data-user']).to eql(another_user.username)
           end
         end
 
@@ -158,8 +158,8 @@ describe "Admin::Users", feature: true  do
         it 'can log out of impersonated user back to original user' do
           find(:css, 'li.impersonation a').click
 
-          page.within '.sidebar-user .username' do
-            expect(page).to have_content(@user.username)
+          page.within '.sidebar-wrapper' do
+            expect(page.find('.sidebar-user')['data-user']).to eql(@user.username)
           end
         end