Merge branch '18417-nav-offscreen' into 'master'

Resolve "Hide Left sidebar paradigm"

## What does this MR do?
Hides the nav bar by default & centers the tanuki logo in the top nav

## Why was this MR needed?
UX

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

## Screenshots (if relevant)
![Screen_Shot_2016-06-10_at_12.49.10_PM](/uploads/c281e4c9de1c1bc9af59ebfa8d2bd18b/Screen_Shot_2016-06-10_at_12.49.10_PM.png)
![Screen_Shot_2016-06-10_at_12.49.27_PM](/uploads/635e0a88230105faa5527f6632899ddb/Screen_Shot_2016-06-10_at_12.49.27_PM.png)
<img src="/uploads/3001a9c723037012f1b86cfacfb1225e/Screen_Shot_2016-06-10_at_12.51.41_PM.png" width="500px">

See merge request !4579

app/assets/javascripts/application.js.coffee

@@ -162,19 +162,6 @@ $ ->
       $el.data('placement') || 'bottom'
   )
 
-  $('.header-logo .home').tooltip(
-    placement: (_, el) ->
-      $el = $(el)
-      if $('.page-with-sidebar').hasClass('page-sidebar-collapsed') then 'right' else 'bottom'
-    container: 'body'
-  )
-
-  $('.page-with-sidebar').tooltip(
-    selector: '.sidebar-collapsed .nav-sidebar a, .sidebar-collapsed a.sidebar-user'
-    placement: 'right'
-    container: 'body'
-  )
-
   # Form submitter
   $('.trigger-submit').on 'change', ->
     $(@).parents('form').submit()
@@ -207,6 +194,7 @@ $ ->
 
   $('.navbar-toggle').on 'click', ->
     $('.header-content .title').toggle()
+    $('.header-content .header-logo').toggle()
     $('.header-content .navbar-collapse').toggle()
     $('.navbar-toggle').toggleClass('active')
     $('.navbar-toggle i').toggleClass("fa-angle-right fa-angle-left")
@@ -241,7 +229,6 @@ $ ->
       $this.attr 'value', $this.val()
 
   $sidebarGutterToggle = $('.js-sidebar-toggle')
-  $navIconToggle = $('.toggle-nav-collapse')
 
   $(document)
     .off 'breakpoint:change'
@@ -251,10 +238,6 @@ $ ->
         if $gutterIcon.hasClass('fa-angle-double-right')
           $sidebarGutterToggle.trigger('click')
 
-        $navIcon = $navIconToggle.find('.fa')
-        if $navIcon.hasClass('fa-angle-left')
-          $navIconToggle.trigger('click')
-
   fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
     bootstrapBreakpoint = bp.getBreakpointSize()

app/assets/javascripts/logo.js.coffee

@@ -47,4 +47,4 @@ $ ->
   # Make logo clickable as part of a workaround for Safari visited
   # link behaviour (See !2690).
   $('#logo').on 'click', ->
-    $('#js-shortcuts-home').get(0).click()
+    Turbolinks.visit('/')

app/assets/javascripts/sidebar.js.coffee

@@ -4,8 +4,6 @@ expanded = 'page-sidebar-expanded'
 toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
-  $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
-  $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->
     niceScrollBars = $('.nicescroll').niceScroll();
@@ -17,10 +15,3 @@ $(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
 
   toggleSidebar()
 )
-
-$ ->
-  size = bp.getBreakpointSize()
-
-  if size is "xs" or size is "sm"
-    if $('.page-with-sidebar').hasClass(expanded)
-      toggleSidebar()

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

@@ -8,34 +8,16 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-    .header-logo {
-      background: $color-darker;
 
-      a {
-        color: $color-light;
-
-        h3 {
-          color: $color-light;
-        }
-      }
+    .collapse-nav a {
+      color: $color-light;
+      background: $color;
 
       &:hover {
-        background-color: $color-dark;
-        a {
-          color: $white-light;
-
-          h3 {
-            color: $white-light;
-          }
-        }
+        color: $white-light;
       }
     }
 
-    .collapse-nav a {
-      color: $white-light;
-      background: $color;
-    }
-
     .sidebar-wrapper {
       background: $color-darker;
 

app/assets/stylesheets/framework/header.scss

@@ -109,10 +109,8 @@ header {
     position: relative;
     height: $header-height;
     padding-right: 40px;
-
-    @media (max-width: $screen-xs-min) {
-      padding-left: 40px;
-    }
+    padding-left: 30px;
+    transition-duration: .3s;
 
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
@@ -122,9 +120,29 @@ header {
       margin-top: -5px;
     }
 
+    .header-logo {
+      position: absolute;
+      left: 50%;
+      margin-left: -18px;
+      top: 7px;
+      transition-duration: .3s;
+      z-index: 999;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        right: 25px;
+        left: auto;
+      }
+    }
+
     .title {
       margin: 0;
       font-size: 19px;
+      max-width: 400px;
+      display: inline-block;
       line-height: $header-height;
       font-weight: normal;
       color: $gl-text-color;
@@ -133,6 +151,10 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
+      @media (max-width: $screen-sm-max) {
+        max-width: 190px;
+      }
+
       a {
         color: $gl-text-color;
         &:hover {
@@ -160,6 +182,10 @@ header {
     .navbar-collapse {
       float: right;
       border-top: none;
+
+      @media (max-width: $screen-xs-max) {
+        float: none;
+      }
     }
   }
 
@@ -176,17 +202,20 @@ header {
   margin-left: 0;
 
   .header-content {
-    padding-left: 30px;
-    transition-duration: .3s;
+
+    @media (min-width: $screen-sm-max) {
+      padding-left: 30px;
+      transition-duration: .3s;
+    }
   }
 }
 
-.header-expanded {
-  margin-left: 0;
+.tanuki-shape {
+  transition: all 0.8s;
 
-  .header-content {
-    margin-left: $sidebar_width;
-    transition-duration: .3s;
+  &:hover, &.highlight {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
   }
 }
 

app/assets/stylesheets/framework/nav.scss

 @mixin fade($gradient-direction, $rgba, $gradient-color) {
   visibility: visible;
   opacity: 1;
+  z-index: 2;
   position: absolute;
   bottom: 12px;
   width: 43px;
@@ -351,7 +352,7 @@
 
     .fade-right {
       @media (min-width: $screen-xs-max) {
-        right: 67px;
+        right: 68px;
       }
       @media (max-width: $screen-xs-min) {
         right: 0;

app/assets/stylesheets/framework/sidebar.scss

@@ -35,24 +35,11 @@
 }
 
 .sidebar-wrapper {
-  .header-logo {
-    height: $header-height;
-    padding: 8px 26px;
-    width: $sidebar_width;
-    position: fixed;
-    z-index: 999;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    &:hover {
-      background-color: #eee;
-    }
-  }
 
   .sidebar-user {
     padding: 15px 22px;
     position: fixed;
-    bottom: 40px;
+    bottom: 0;
     width: $sidebar_width;
     overflow: hidden;
     transition-duration: .3s;
@@ -97,10 +84,10 @@
     }
 
     a {
-      text-align: center;
-      padding: 8px;
+      width: $sidebar_width;
+      padding: 7px 15px 7px 23px;
       font-size: $gl-font-size;
-      color: $gray;
+      line-height: 24px;
       display: block;
       text-decoration: none;
       font-weight: normal;
@@ -118,10 +105,9 @@
         font-size: 16px;
       }
 
-      .nav-link-text {
-        margin-top: 3px;
-        font-size: 13px;
-        line-height: 18px;
+      i,
+      svg {
+        margin-right: 13px;
       }
 
       &.back-link i {
@@ -129,6 +115,12 @@
       }
     }
   }
+
+  .count {
+    float: right;
+    padding: 0 8px;
+    @include border-radius(6px);
+  }
 }
 
 .sidebar-subnav {
@@ -143,11 +135,12 @@
 .collapse-nav a {
   width: $sidebar_width;
   position: fixed;
-  bottom: 0;
+  top: 0;
   left: 0;
-  font-size: 13px;
+  padding: 5px 0;
+  font-size: 18px;
   background: transparent;
-  height: 40px;
+  height: 50px;
   text-align: center;
   line-height: 40px;
   transition-duration: .3s;
@@ -170,25 +163,8 @@
   .sidebar-wrapper {
     width: 0;
 
-    .header-logo {
-      width: 0;
-      padding: 8px 0;
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
-
-    #logo {
-      display: none;
-    }
-
     .nav-sidebar {
-      width: $sidebar_collapsed_width;
+      width: 0;
 
       li {
         width: auto;
@@ -203,6 +179,10 @@
 
     .collapse-nav a {
       width: 0;
+
+      i {
+        display: none;
+      }
     }
 
     .sidebar-user {
@@ -218,9 +198,8 @@
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_width;
 
-  @media (max-width: $screen-xs-min) {
+  @media (max-width: $screen-sm-max) {
     padding-left: 0;
   }
 
@@ -241,20 +220,6 @@
       }
     }
   }
-
-  .layout-nav {
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;
-    }
-
-    @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
-      padding-right: 90px;
-    }
-
-    @media (min-width: $screen-md-min) {
-      padding-right: $sidebar_width;
-    }
-  }
 }
 
 .right-sidebar-collapsed {

app/assets/stylesheets/framework/variables.scss

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

app/helpers/nav_helper.rb

@@ -36,13 +36,7 @@ module NavHelper
   end
 
   def nav_header_class
-    class_name =
-      if nav_menu_collapsed?
-        "header-collapsed"
-      else
-        "header-expanded"
-      end
-    class_name += " with-horizontal-nav" if defined?(nav) && nav
+    class_name = " with-horizontal-nav" if defined?(nav) && nav
     class_name
   end
 

app/views/layouts/_collapse_button.html.haml

-- if nav_menu_collapsed?
-  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
-- else
-  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
+= link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open/Close"

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
+.page-with-sidebar.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    = 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}"
@@ -16,10 +12,12 @@
       = render partial: 'layouts/collapse_button'
     - if current_user
       = 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'
+        = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
+        .username
+          = current_user.username
   - if defined?(nav) && nav
     .layout-nav
-      .container-fluid
+      %div{ class: (container_class) }
         = render "layouts/nav/#{nav}"
   .content-wrapper{ class: "#{layout_nav_class}" }
     = render "layouts/broadcast"

app/views/layouts/ci/_page.html.haml

 .page-with-sidebar{ class: page_sidebar_class }
   = render "layouts/broadcast"
   .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
 
     - if defined?(sidebar) && sidebar
       = render "layouts/ci/#{sidebar}"

app/views/layouts/header/_default.html.haml

-%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
+%header.navbar.navbar-fixed-top.navbar-gitlab.header-collapsed{ class: nav_header_class }
   %div{ class: fluid_layout ? "container-fluid" : "container-fluid" }
     .header-content
       %button.side-nav-toggle{type: 'button'}
@@ -50,6 +50,10 @@
 
       %h1.title= title
 
+      .header-logo
+        #logo
+          = brand_header_logo
+
       = yield :header_content
 
 = render 'shared/outdated_browser'

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

@@ -2,102 +2,106 @@
   = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
     = link_to admin_root_path, title: 'Overview' do
       = icon('dashboard fw')
-      .nav-link-text
+      %span
         Overview
   = nav_link(controller: [:admin, :projects]) do
     = link_to admin_namespaces_projects_path, title: 'Projects' do
       = icon('cube fw')
-      .nav-link-text
+      %span
         Projects
   = nav_link(controller: :users) do
     = link_to admin_users_path, title: 'Users' do
       = icon('user fw')
-      .nav-link-text
+      %span
         Users
   = nav_link(controller: :groups) do
     = link_to admin_groups_path, title: 'Groups' do
       = icon('group fw')
-      .nav-link-text
+      %span
         Groups
   = nav_link(controller: :deploy_keys) do
     = link_to admin_deploy_keys_path, title: 'Deploy Keys' do
       = icon('key fw')
-      .nav-link-text
+      %span
         Deploy Keys
   = nav_link path: ['runners#index', 'runners#show'] do
     = link_to admin_runners_path, title: 'Runners' do
       = icon('cog fw')
-      .nav-link-text
+      %span
         Runners
+        %span.count= number_with_delimiter(Ci::Runner.count(:all))
   = nav_link path: 'builds#index' do
     = link_to admin_builds_path, title: 'Builds' do
       = icon('link fw')
-      .nav-link-text
+      %span
         Builds
+        %span.count= number_with_delimiter(Ci::Build.count(:all))
   = nav_link(controller: :logs) do
     = link_to admin_logs_path, title: 'Logs' do
       = icon('file-text fw')
-      .nav-link-text
+      %span
         Logs
   = nav_link(controller: :health_check) do
     = link_to admin_health_check_path, title: 'Health Check' do
       = icon('medkit fw')
-      .nav-link-text
+      %span
         Health Check
   = nav_link(controller: :broadcast_messages) do
     = link_to admin_broadcast_messages_path, title: 'Messages' do
       = icon('bullhorn fw')
-      .nav-link-text
+      %span
         Messages
   = nav_link(controller: :hooks) do
     = link_to admin_hooks_path, title: 'Hooks' do
       = icon('external-link fw')
-      .nav-link-text
+      %span
         Hooks
   = nav_link(controller: :background_jobs) do
     = link_to admin_background_jobs_path, title: 'Background Jobs' do
       = icon('cog fw')
-      .nav-link-text
+      %span
         Background Jobs
   = nav_link(controller: :appearances) do
     = link_to admin_appearances_path, title: 'Appearances' do
       = icon('image')
-      .nav-link-text
+      %span
         Appearance
 
   = nav_link(controller: :applications) do
     = link_to admin_applications_path, title: 'Applications' do
       = icon('cloud fw')
-      .nav-link-text
+      %span
         Applications
 
   = nav_link(controller: :services) do
     = link_to admin_application_settings_services_path, title: 'Service Templates' do
       = icon('copy fw')
-      .nav-link-text
+      %span
         Service Templates
 
   = nav_link(controller: :labels) do
     = link_to admin_labels_path, title: 'Labels' do
       = icon('tags fw')
-      .nav-link-text
+      %span
         Labels
 
   = nav_link(controller: :abuse_reports) do
     = link_to admin_abuse_reports_path, title: "Abuse Reports" do
       = icon('exclamation-circle fw')
-      .nav-link-text
+      %span
         Abuse Reports
+        %span.count= number_with_delimiter(AbuseReport.count(:all))
 
   - if askimet_enabled?
     = nav_link(controller: :spam_logs) do
       = link_to admin_spam_logs_path, title: "Spam Logs" do
         = icon('exclamation-triangle fw')
-        .nav-link-text
+        %span
           Spam Logs
+          %span.count= number_with_delimiter(SpamLog.count(:all))
 
   = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
     = link_to admin_application_settings_path, title: 'Settings' do
       = icon('cogs fw')
-      .nav-link-text
+      %span
         Settings

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

@@ -2,50 +2,53 @@
   = 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
       = navbar_icon('project')
-      .nav-link-text
+      %span
         Projects
   = nav_link(controller: :todos) do
     = link_to dashboard_todos_path, title: 'Todos' do
       = icon('bell fw')
-      .nav-link-text
+      %span
         Todos
+        %span.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
       = navbar_icon('activity')
-      .nav-link-text
+      %span
         Activity
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = navbar_icon('group')
-      .nav-link-text
+      %span
         Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
       = navbar_icon('milestones')
-      .nav-link-text
+      %span
         Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
       = navbar_icon('issues')
-      .nav-link-text
+      %span
         Issues
+        %span.count= number_with_delimiter(current_user.assigned_issues.opened.count)
   = nav_link(path: 'dashboard#merge_requests') do
     = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
       = navbar_icon('mr')
-      .nav-link-text
+      %span
         Merge Requests
+        %span.count= number_with_delimiter(current_user.assigned_merge_requests.opened.count)
   = nav_link(controller: :snippets) do
     = link_to dashboard_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
-      .nav-link-text
+      %span
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
-      .nav-link-text
+      %span
         Help
   = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')
-      .nav-link-text
+      %span
         Profile Settings

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

@@ -2,20 +2,20 @@
   = nav_link(path: ['dashboard#show', 'root#show', 'projects#trending', 'projects#starred', 'projects#index'], html_options: {class: 'home'}) do
     = link_to explore_root_path, title: 'Projects' do
       = icon('bookmark fw')
-      .nav-link-text
+      %span
         Projects
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to explore_groups_path, title: 'Groups' do
       = icon('group fw')
-      .nav-link-text
+      %span
         Groups
   = nav_link(controller: :snippets) do
     = link_to explore_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
-      .nav-link-text
+      %span
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
-      .nav-link-text
+      %span
         Help

features/steps/profile/profile.rb

@@ -155,6 +155,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
   end
 
   step 'I click on my profile picture' do
+    find(:css, '.side-nav-toggle').click
     find(:css, '.sidebar-user').click
   end
 

spec/features/profiles/preferences_spec.rb

@@ -54,7 +54,7 @@ describe 'Profile > Preferences', feature: true do
     end
   end
 
-  describe 'User changes their default dashboard' do
+  describe 'User changes their default dashboard', js: true do
     it 'creates a flash message' do
       select 'Starred Projects', from: 'user_dashboard'
       click_button 'Save'
@@ -66,8 +66,10 @@ describe 'Profile > Preferences', feature: true do
       select 'Starred Projects', from: 'user_dashboard'
       click_button 'Save'
 
-      click_link 'Dashboard'
-      expect(page.current_path).to eq starred_dashboard_projects_path
+      allowing_for_delay do
+        find('#logo').click
+        expect(page.current_path).to eq starred_dashboard_projects_path
+      end
 
       click_link 'Your Projects'
       expect(page.current_path).to eq dashboard_projects_path