Merge branch 'ui/sidebar' into 'master'

UI: Sidebar & header tweaks and fixes

Depends on !1953 

See the commits for more details, the messages mostly speak for themselves.

![Logo](https://gitlab.com/gitlab-org/gitlab-ce/uploads/ba088150165bb0a0aea1e894f3443f43/logo_tooltip.png)

![Sidebar](https://gitlab.com/gitlab-org/gitlab-ce/uploads/c1e8c09ac3bf489cdb9531eebea18c90/sidebar_tooltips.png)

Fixes #2928, #2071, https://dev.gitlab.org/gitlab/gitlabhq/issues/2575, and https://dev.gitlab.org/gitlab/gitlabhq/issues/2573

See merge request !1958

app/assets/javascripts/application.js.coffee

@@ -135,17 +135,25 @@ $ ->
     ), 1
 
   # Initialize tooltips
-  $('body').tooltip({
-    selector: '.has_tooltip, [data-toggle="tooltip"], .page-sidebar-collapsed .nav-sidebar a'
+  $('body').tooltip(
+    selector: '.has_tooltip, [data-toggle="tooltip"]'
     placement: (_, el) ->
       $el = $(el)
-      if $el.attr('id') == 'js-shortcuts-home'
-        # Place the logo tooltip on the right when collapsed, bottom when expanded
-        $el.parents('header').hasClass('header-collapsed') and 'right' or 'bottom'
-      else
-        # Otherwise use the data-placement attribute, or 'bottom' if undefined
-        $el.data('placement') or 'bottom'
-  })
+      $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', ->

app/assets/javascripts/sidebar.js.coffee

@@ -5,6 +5,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
 
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
+  $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
   $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 )

app/assets/stylesheets/framework/header.scss

@@ -6,15 +6,17 @@ header {
   transition-duration: .3s;
 
   &.navbar-empty {
+    height: 58px;
     background: #FFF;
     border-bottom: 1px solid #EEE;
 
     .center-logo {
-      margin: 8px 0;
+      margin: 11px 0;
       text-align: center;
 
-      img {
-        height: 32px;
+      #tanuki-logo, img {
+        width: 36px;
+        height: 36px;
       }
     }
   }

app/assets/stylesheets/framework/sidebar.scss

 .page-with-sidebar {
   padding-top: $header-height;
+  transition-duration: .3s;
 
   .sidebar-wrapper {
     position: fixed;
@@ -16,7 +17,6 @@
 .sidebar-wrapper {
   z-index: 99;
   background: $background-color;
-  transition-duration: .3s;
 }
 
 .content-wrapper {
@@ -35,6 +35,83 @@
   }
 }
 
+.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: 11px 0 11px 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: 14px;
+          font-size: 19px;
+          line-height: 41px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #EEE;
+    }
+  }
+
+  .sidebar-user {
+    padding: 9px 22px;
+    position: fixed;
+    bottom: 40px;
+    width: $sidebar_width;
+    overflow: hidden;
+    transition-duration: .3s;
+
+    .username {
+      margin-left: 10px;
+      width: $sidebar_width - 2 * 10px;
+      font-size: 16px;
+      line-height: 34px;
+    }
+  }
+}
+
+
+.tanuki-shape {
+  transition: all 0.8s;
+
+  &:hover {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
+  }
+}
+
+
 .nav-sidebar {
   margin-top: 14 + $header-height;
   margin-bottom: 100px;
@@ -61,7 +138,7 @@
       color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 22px;
+      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -85,6 +162,10 @@
         padding: 0px 8px;
         @include border-radius(6px);
       }
+
+      &.back-link i {
+        transition-duration: .3s;
+      }
     }
   }
 }
@@ -100,7 +181,6 @@
 
 @mixin expanded-sidebar {
   padding-left: $sidebar_width;
-  transition-duration: .3s;
 
   .sidebar-wrapper {
     width: $sidebar_width;
@@ -114,16 +194,15 @@
 
       &.back-link {
         i {
-          visibility: hidden;
+          opacity: 0;
         }
       }
     }
   }
 }
 
-@mixin folded-sidebar {
-  padding-left: 60px;
-  transition-duration: .3s;
+@mixin collapsed-sidebar {
+  padding-left: $sidebar_collapsed_width;
 
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
@@ -132,7 +211,7 @@
       width: $sidebar_collapsed_width;
 
       a {
-        padding-left: 12px;
+        padding-left: ($sidebar_collapsed_width - 36) / 2;
 
         .gitlab-text-container {
           display: none;
@@ -143,9 +222,13 @@
     .nav-sidebar {
       width: $sidebar_collapsed_width;
 
-      li a {
-        span {
-          display: none;
+      li {
+        width: auto;
+
+        a {
+          span {
+            display: none;
+          }
         }
       }
     }
@@ -155,7 +238,7 @@
     }
 
     .sidebar-user {
-      padding-left: 12px;
+      padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
 
       .username {
@@ -186,11 +269,11 @@
 
 @media (max-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .page-sidebar-expanded {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .collapse-nav {
@@ -200,83 +283,10 @@
 
 @media(min-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
 
   .page-sidebar-expanded {
     @include expanded-sidebar;
   }
 }
-
-.sidebar-user {
-  padding: 9px 22px;
-  position: fixed;
-  bottom: 40px;
-  width: $sidebar_width;
-  overflow: hidden;
-  transition-duration: .3s;
-
-  .username {
-    margin-left: 10px;
-    width: $sidebar_width - 2 * 10px;
-    font-size: 16px;
-    line-height: 34px;
-  }
-}
-
-.sidebar-wrapper {
-  .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
-    height: $header-height;
-    width: $sidebar_width;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding: 10px 22px;
-      overflow: hidden;
-      outline: none;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 14px;
-          font-size: 19px;
-          line-height: 41px;
-          font-weight: normal;
-        }
-      }
-    }
-
-    &:hover {
-      background-color: #EEE;
-    }
-  }
-}
-
-
-.tanuki-shape {
-  transition: all 0.8s;
-
-  &:hover {
-    fill: rgb(255, 255, 255);
-    transition: all 0.1s;
-  }
-}

app/helpers/nav_helper.rb

@@ -4,6 +4,14 @@ module NavHelper
   end
 
   def nav_sidebar_class
+    if nav_menu_collapsed?
+      "sidebar-collapsed"
+    else
+      "sidebar-expanded"
+    end
+  end
+
+  def page_sidebar_class
     if nav_menu_collapsed?
       "page-sidebar-collapsed"
     else

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: nav_sidebar_class }
+.page-with-sidebar{ class: page_sidebar_class }
   = render "layouts/broadcast"
-  .sidebar-wrapper.nicescroll
+  .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
-      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
+      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
         = brand_header_logo
         .gitlab-text-container
           %h3 GitLab
@@ -17,8 +17,8 @@
     .collapse-nav
       = render partial: 'layouts/collapse_button'
     - if current_user
-      = link_to current_user, class: 'sidebar-user' do
-        = image_tag avatar_icon(current_user, 60), alt: 'User activity', class: 'avatar avatar s36'
+      = 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
   .content-wrapper

app/views/layouts/admin.html.haml

-- page_title    "Admin area"
-- header_title  "Admin area", admin_root_path
+- page_title    "Admin Area"
+- header_title  "Admin Area", admin_root_path
 - sidebar       "admin"
 
 = render template: "layouts/application"

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

-.page-with-sidebar{ class: nav_sidebar_class }
+.page-with-sidebar{ class: page_sidebar_class }
   = render "layouts/broadcast"
-  .sidebar-wrapper.nicescroll
+  .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
     .header-logo
-      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do
+      = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home' do
         = brand_header_logo
         .gitlab-text-container
           %h3 GitLab
@@ -14,8 +14,8 @@
     .collapse-nav
       = render partial: 'layouts/collapse_button'
     - if current_user
-      = link_to current_user, class: 'sidebar-user' do
-        = image_tag avatar_icon(current_user, 60), alt: 'User activity', class: 'avatar avatar s36'
+      = 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
   .content-wrapper

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

@@ -11,27 +11,27 @@
             %li.hidden-sm.hidden-xs
               = render 'layouts/search'
           %li.visible-sm.visible-xs
-            = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom'} do
+            = link_to search_path, title: 'Search', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = icon('search')
           - if session[:impersonator_id]
             %li.impersonation
-              = link_to stop_impersonation_admin_users_path, method: :delete, title: 'Stop impersonation', data: { toggle: 'tooltip', placement: 'bottom' } do
+              = link_to stop_impersonation_admin_users_path, method: :delete, title: 'Stop Impersonation', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
                 = icon('user-secret fw')
           - if current_user.is_admin?
             %li
-              = link_to admin_root_path, title: 'Admin area', data: {toggle: 'tooltip', placement: 'bottom'} do
+              = link_to admin_root_path, title: 'Admin Area', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = icon('wrench fw')
           - if current_user.can_create_project?
             %li
-              = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom'} do
+              = link_to new_project_path, title: 'New project', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = icon('plus fw')
           - if Gitlab::Sherlock.enabled?
             %li
               = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
-                data: {toggle: 'tooltip', placement: 'bottom'} do
+                data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                 = icon('tachometer fw')
           %li
-            = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom'} do
+            = link_to destroy_user_session_path, class: 'logout', method: :delete, title: 'Sign out', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = icon('sign-out')
 
       %h1.title= title

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

@@ -5,78 +5,78 @@
       %span
         Overview
   = nav_link(controller: [:admin, :projects]) do
-    = link_to admin_namespaces_projects_path, title: 'Projects', data: {placement: 'right'} do
+    = link_to admin_namespaces_projects_path, title: 'Projects' do
       = icon('cube fw')
       %span
         Projects
   = nav_link(controller: :users) do
-    = link_to admin_users_path, title: 'Users', data: {placement: 'right'} do
+    = link_to admin_users_path, title: 'Users' do
       = icon('user fw')
       %span
         Users
   = nav_link(controller: :groups) do
-    = link_to admin_groups_path, title: 'Groups', data: {placement: 'right'} do
+    = link_to admin_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
         Groups
   = nav_link(controller: :deploy_keys) do
-    = link_to admin_deploy_keys_path, title: 'Deploy Keys', data: {placement: 'right'} do
+    = link_to admin_deploy_keys_path, title: 'Deploy Keys' do
       = icon('key fw')
       %span
         Deploy Keys
   = nav_link do
-    = link_to ci_admin_projects_path, title: 'Continuous Integration', data: {placement: 'right'} do
+    = link_to ci_admin_projects_path, title: 'Continuous Integration' do
       = icon('building fw')
       %span
         Continuous Integration
   = nav_link(controller: :logs) do
-    = link_to admin_logs_path, title: 'Logs', data: {placement: 'right'} do
+    = link_to admin_logs_path, title: 'Logs' do
       = icon('file-text fw')
       %span
         Logs
   = nav_link(controller: :broadcast_messages) do
-    = link_to admin_broadcast_messages_path, title: 'Broadcast Messages', data: {placement: 'right'} do
+    = link_to admin_broadcast_messages_path, title: 'Messages' do
       = icon('bullhorn fw')
       %span
         Messages
   = nav_link(controller: :hooks) do
-    = link_to admin_hooks_path, title: 'Hooks', data: {placement: 'right'} do
+    = link_to admin_hooks_path, title: 'Hooks' do
       = icon('external-link fw')
       %span
         Hooks
   = nav_link(controller: :background_jobs) do
-    = link_to admin_background_jobs_path, title: 'Background Jobs', data: {placement: 'right'} do
+    = link_to admin_background_jobs_path, title: 'Background Jobs' do
       = icon('cog fw')
       %span
         Background Jobs
 
   = nav_link(controller: :applications) do
-    = link_to admin_applications_path, title: 'Applications', data: {placement: 'right'} do
+    = link_to admin_applications_path, title: 'Applications' do
       = icon('cloud fw')
       %span
         Applications
 
   = nav_link(controller: :services) do
-    = link_to admin_application_settings_services_path, title: 'Service Templates', data: {placement: 'right'} do
+    = link_to admin_application_settings_services_path, title: 'Service Templates' do
       = icon('copy fw')
       %span
         Service Templates
 
   = nav_link(controller: :labels) do
-    = link_to admin_labels_path, title: 'Labels', data: {placement: 'right'} do
+    = link_to admin_labels_path, title: 'Labels' do
       = icon('tags fw')
       %span
         Labels
 
   = nav_link(controller: :abuse_reports) do
-    = link_to admin_abuse_reports_path, title: "Abuse reports" do
+    = link_to admin_abuse_reports_path, title: "Abuse Reports" do
       = icon('exclamation-circle fw')
       %span
         Abuse Reports
         %span.count= AbuseReport.count(:all)
 
   = nav_link(controller: :application_settings, html_options: { class: 'separate-item'}) do
-    = link_to admin_application_settings_path, title: 'Settings', data: {placement: 'right'} do
+    = link_to admin_application_settings_path, title: 'Settings' do
       = icon('cogs fw')
       %span
         Settings

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

 %ul.nav.nav-sidebar
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: 'home'}) do
-    = link_to dashboard_projects_path, title: 'Projects', data: {placement: 'right'} do
+    = link_to dashboard_projects_path, title: 'Projects' do
       = icon('home fw')
       %span
         Projects
   = nav_link(path: 'dashboard#activity') do
-    = link_to activity_dashboard_path, class: 'shortcuts-activity', title: 'Activity', data: {placement: 'right'} do
+    = link_to activity_dashboard_path, class: 'shortcuts-activity', title: 'Activity' do
       = icon('dashboard fw')
       %span
         Activity
   = nav_link(controller: :groups) do
-    = link_to dashboard_groups_path, title: 'Groups', data: {placement: 'right'} do
+    = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
         Groups
   = nav_link(controller: :milestones) do
-    = link_to dashboard_milestones_path, title: 'Milestones', data: {placement: 'right'} do
+    = link_to dashboard_milestones_path, title: 'Milestones' do
       = icon('clock-o fw')
       %span
         Milestones
   = nav_link(path: 'dashboard#issues') do
-    = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'shortcuts-issues', data: {placement: 'right'} do
+    = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'shortcuts-issues' do
       = icon('exclamation-circle fw')
       %span
         Issues
         %span.count= current_user.assigned_issues.opened.count
     = nav_link(path: 'dashboard#merge_requests') do
-      = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'shortcuts-merge_requests', data: {placement: 'right'} do
+      = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'shortcuts-merge_requests' do
         = icon('tasks fw')
         %span
           Merge Requests
           %span.count= current_user.assigned_merge_requests.opened.count
   = nav_link(controller: :snippets) do
-    = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
+    = link_to dashboard_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
       %span
         Snippets
   = nav_link(controller: :help) do
-    = link_to help_path, title: 'Help', data: {placement: 'right'} do
+    = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
       %span
         Help
 
   %li.separate-item
   = nav_link(controller: :profile) do
-    = link_to profile_path, title: 'Profile settings', data: {placement: 'bottom'} do
+    = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')
       %span
         Profile Settings

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

 %ul.nav.nav-sidebar
   = 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', data: {placement: 'right'} do
+    = link_to explore_root_path, title: 'Projects' do
       = icon('home fw')
       %span
         Projects
   = nav_link(controller: :groups) do
-    = link_to explore_groups_path, title: 'Groups', data: {placement: 'right'} do
+    = link_to explore_groups_path, title: 'Groups' do
       = icon('group fw')
       %span
         Groups
   = nav_link(controller: :snippets) do
-    = link_to explore_snippets_path, title: 'Snippets', data: {placement: 'right'} do
+    = link_to explore_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
       %span
         Snippets
   = nav_link(controller: :help) do
-    = link_to help_path, title: 'Help', data: {placement: 'right'} do
+    = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
       %span
         Help

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

 %ul.nav.nav-sidebar
   = nav_link do
-    = link_to root_path, title: 'Go to dashboard', data: {placement: 'right'}, class: 'back-link' do
+    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
       = icon('caret-square-o-left fw')
       %span
         Go to dashboard
@@ -8,39 +8,39 @@
   %li.separate-item
 
   = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
-    = link_to group_path(@group), title: 'Home', data: {placement: 'right'} do
+    = link_to group_path(@group), title: 'Home' do
       = icon('dashboard fw')
       %span
         Group
   - if can?(current_user, :read_group, @group)
     - if current_user
       = nav_link(controller: [:group, :milestones]) do
-        = link_to group_milestones_path(@group), title: 'Milestones', data: {placement: 'right'} do
+        = link_to group_milestones_path(@group), title: 'Milestones' do
           = icon('clock-o fw')
           %span
             Milestones
     = nav_link(path: 'groups#issues') do
-      = link_to issues_group_path(@group), title: 'Issues', data: {placement: 'right'} do
+      = link_to issues_group_path(@group), title: 'Issues' do
         = icon('exclamation-circle fw')
         %span
           Issues
           - if current_user
             %span.count= Issue.opened.of_group(@group).count
     = nav_link(path: 'groups#merge_requests') do
-      = link_to merge_requests_group_path(@group), title: 'Merge Requests', data: {placement: 'right'} do
+      = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
         = icon('tasks fw')
         %span
           Merge Requests
           - if current_user
             %span.count= MergeRequest.opened.of_group(@group).count
     = nav_link(controller: [:group_members]) do
-      = link_to group_group_members_path(@group), title: 'Members', data: {placement: 'right'} do
+      = link_to group_group_members_path(@group), title: 'Members' do
         = icon('users fw')
         %span
           Members
     - if can?(current_user, :admin_group, @group)
       = nav_link(html_options: { class: "separate-item" }) do
-        = link_to edit_group_path(@group), title: 'Settings', data: {placement: 'right'} do
+        = link_to edit_group_path(@group), title: 'Settings' do
           = icon ('cogs fw')
           %span
             Settings

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

 %ul.nav.nav-sidebar
   = nav_link do
-    = link_to group_path(@group), title: 'Go to group', data: {placement: 'right'}, class: 'back-link' do
+    = link_to group_path(@group), title: 'Go to group', class: 'back-link' do
       = icon('caret-square-o-left fw')
       %span
         Go to group
@@ -9,12 +9,12 @@
 
   %ul.sidebar-subnav
     = nav_link(path: 'groups#edit') do
-      = link_to edit_group_path(@group), title: 'Group Settings', data: {placement: 'right'} do
+      = link_to edit_group_path(@group), title: 'Group Settings' do
         = icon ('pencil-square-o fw')
         %span
           Group Settings
     = nav_link(path: 'groups#projects') do
-      = link_to projects_group_path(@group), title: 'Projects', data: {placement: 'right'} do
+      = link_to projects_group_path(@group), title: 'Projects' do
         = icon('folder fw')
         %span
           Projects

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

 %ul.nav.nav-sidebar
   = nav_link do
-    = link_to root_path, title: 'Go to dashboard', data: {placement: 'right'}, class: 'back-link' do
+    = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
       = icon('caret-square-o-left fw')
       %span
         Go to dashboard
@@ -8,52 +8,52 @@
   %li.separate-item
 
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
-    = link_to profile_path, title: 'Profile', data: {placement: 'right'} do
+    = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')
       %span
         Profile Settings
   = nav_link(controller: [:accounts, :two_factor_auths]) do
-    = link_to profile_account_path, title: 'Account', data: {placement: 'right'} do
+    = link_to profile_account_path, title: 'Account' do
       = icon('gear fw')
       %span
         Account
   = nav_link(path: ['profiles#applications', 'applications#edit', 'applications#show', 'applications#new', 'applications#create']) do
-    = link_to applications_profile_path, title: 'Applications', data: {placement: 'right'} do
+    = link_to applications_profile_path, title: 'Applications' do
       = icon('cloud fw')
       %span
         Applications
   = nav_link(controller: :emails) do
-    = link_to profile_emails_path, title: 'Emails', data: {placement: 'right'} do
+    = link_to profile_emails_path, title: 'Emails' do
       = icon('envelope-o fw')
       %span
         Emails
         %span.count= current_user.emails.count + 1
   - unless current_user.ldap_user?
     = nav_link(controller: :passwords) do
-      = link_to edit_profile_password_path, title: 'Password', data: {placement: 'right'} do
+      = link_to edit_profile_password_path, title: 'Password' do
         = icon('lock fw')
         %span
           Password
   = nav_link(controller: :notifications) do
-    = link_to profile_notifications_path, title: 'Notifications', data: {placement: 'right'} do
+    = link_to profile_notifications_path, title: 'Notifications' do
       = icon('inbox fw')
       %span
         Notifications
 
   = nav_link(controller: :keys) do
-    = link_to profile_keys_path, title: 'SSH Keys', data: {placement: 'right'} do
+    = link_to profile_keys_path, title: 'SSH Keys' do
       = icon('key fw')
       %span
         SSH Keys
         %span.count= current_user.keys.count
   = nav_link(controller: :preferences) do
-    = link_to profile_preferences_path, title: 'Preferences', data: {placement: 'right'} do
+    = link_to profile_preferences_path, title: 'Preferences' do
       -# TODO (rspeicher): Better icon?
       = icon('image fw')
       %span
         Preferences
   = nav_link(path: 'profiles#audit_log') do
-    = link_to audit_log_profile_path, title: 'Audit Log', data: {placement: 'right'} do
+    = link_to audit_log_profile_path, title: 'Audit Log' do
       = icon('history fw')
       %span
         Audit Log

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

 %ul.nav.nav-sidebar
   - if @project.group
     = nav_link do
-      = link_to group_path(@project.group), title: 'Go to group', data: {placement: 'right'}, class: 'back-link' do
+      = link_to group_path(@project.group), title: 'Go to group', class: 'back-link' do
         = icon('caret-square-o-left fw')
         %span
           Go to group
   - else
     = nav_link do
-      = link_to root_path, title: 'Go to dashboard', data: {placement: 'right'}, class: 'back-link' do
+      = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
         = icon('caret-square-o-left fw')
         %span
           Go to dashboard
@@ -15,32 +15,32 @@
   %li.separate-item
 
   = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
-    = link_to project_path(@project), title: 'Project', class: 'shortcuts-project', data: {placement: 'right'} do
+    = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
       = icon('home fw')
       %span
         Project
   = nav_link(path: 'projects#activity') do
-    = link_to activity_project_path(@project), title: 'Project Activity', class: 'shortcuts-project-activity', data: {placement: 'right'} do
+    = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
       = icon('dashboard fw')
       %span
         Activity
   - if project_nav_tab? :files
     = nav_link(controller: %w(tree blob blame edit_tree new_tree)) do
-      = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree', data: {placement: 'right'} do
+      = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
         = icon('files-o fw')
         %span
           Files
 
   - if project_nav_tab? :commits
     = nav_link(controller: %w(commit commits compare repositories tags branches releases)) do
-      = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits', data: {placement: 'right'} do
+      = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
         = icon('history fw')
         %span
           Commits
 
   - if project_nav_tab? :builds
     = nav_link(controller: %w(builds)) do
-      = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds', data: {placement: 'right'} do
+      = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
         = icon('cubes fw')
         %span
           Builds
@@ -48,28 +48,28 @@
 
   - if project_nav_tab? :network
     = nav_link(controller: %w(network)) do
-      = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network', data: {placement: 'right'} do
+      = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
         = icon('code-fork fw')
         %span
           Network
 
   - if project_nav_tab? :graphs
     = nav_link(controller: %w(graphs)) do
-      = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs', data: {placement: 'right'} do
+      = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
         = icon('area-chart fw')
         %span
           Graphs
 
   - if project_nav_tab? :milestones
     = nav_link(controller: :milestones) do
-      = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones', data: {placement: 'right'} do
+      = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
         = icon('clock-o fw')
         %span
           Milestones
 
   - if project_nav_tab? :issues
     = nav_link(controller: :issues) do
-      = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues', data: {placement: 'right'} do
+      = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues' do
         = icon('exclamation-circle fw')
         %span
           Issues
@@ -78,7 +78,7 @@
 
   - if project_nav_tab? :merge_requests
     = nav_link(controller: :merge_requests) do
-      = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests', data: {placement: 'right'} do
+      = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
         = icon('tasks fw')
         %span
           Merge Requests
@@ -86,35 +86,35 @@
 
   - if project_nav_tab? :settings
     = nav_link(controller: [:project_members, :teams]) do
-      = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab', data: {placement: 'right'} do
+      = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
         = icon('users fw')
         %span
           Members
 
   - if project_nav_tab? :labels
     = nav_link(controller: :labels) do
-      = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels', data: {placement: 'right'} do
+      = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
         = icon('tags fw')
         %span
           Labels
 
   - if project_nav_tab? :wiki
     = nav_link(controller: :wikis) do
-      = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki', data: {placement: 'right'} do
+      = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
         = icon('book fw')
         %span
           Wiki
 
   - if project_nav_tab? :snippets
     = nav_link(controller: :snippets) do
-      = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets', data: {placement: 'right'} do
+      = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets' do
         = icon('clipboard fw')
         %span
           Snippets
 
   - if project_nav_tab? :settings
     = nav_link(html_options: {class: "#{project_tab_class} separate-item"}) do
-      = link_to edit_project_path(@project), title: 'Settings', data: {placement: 'right'} do
+      = link_to edit_project_path(@project), title: 'Settings' do
         = icon('cogs fw')
         %span
           Settings

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

 %ul.nav.nav-sidebar
   = nav_link do
-    = link_to project_path(@project), title: 'Go to project', data: {placement: 'right'}, class: 'back-link' do
+    = link_to project_path(@project), title: 'Go to project', class: 'back-link' do
       = icon('caret-square-o-left fw')
       %span
         Go to project
@@ -9,59 +9,59 @@
 
   %ul.sidebar-subnav
     = nav_link(path: 'projects#edit') do
-      = link_to edit_project_path(@project), title: 'Project Settings', data: {placement: 'right'} do
+      = link_to edit_project_path(@project), title: 'Project Settings' do
         = icon('pencil-square-o fw')
         %span
           Project Settings
     = nav_link(controller: :deploy_keys) do
-      = link_to namespace_project_deploy_keys_path(@project.namespace, @project), title: 'Deploy Keys', data: {placement: 'right'} do
+      = link_to namespace_project_deploy_keys_path(@project.namespace, @project), title: 'Deploy Keys' do
         = icon('key fw')
         %span
           Deploy Keys
     = nav_link(controller: :hooks) do
-      = link_to namespace_project_hooks_path(@project.namespace, @project), title: 'Web Hooks', data: {placement: 'right'} do
+      = link_to namespace_project_hooks_path(@project.namespace, @project), title: 'Web Hooks' do
         = icon('link fw')
         %span
           Web Hooks
     = nav_link(controller: :services) do
-      = link_to namespace_project_services_path(@project.namespace, @project), title: 'Services', data: {placement: 'right'} do
+      = link_to namespace_project_services_path(@project.namespace, @project), title: 'Services' do
         = icon('cogs fw')
         %span
           Services
     = nav_link(controller: :protected_branches) do
-      = link_to namespace_project_protected_branches_path(@project.namespace, @project), title: 'Protected Branches', data: {placement: 'right'} do
+      = link_to namespace_project_protected_branches_path(@project.namespace, @project), title: 'Protected Branches' do
         = icon('lock fw')
         %span
           Protected Branches
 
     - if @project.builds_enabled?
       = nav_link(controller: :runners) do
-        = link_to namespace_project_runners_path(@project.namespace, @project), title: 'Runners', data: {placement: 'right'} do
+        = link_to namespace_project_runners_path(@project.namespace, @project), title: 'Runners' do
           = icon('cog fw')
           %span
             Runners
       = nav_link(controller: :variables) do
-        = link_to namespace_project_variables_path(@project.namespace, @project) do
+        = link_to namespace_project_variables_path(@project.namespace, @project), title: 'Variables' do
           = icon('code fw')
           %span
             Variables
       = nav_link path: 'triggers#index' do
-        = link_to namespace_project_triggers_path(@project.namespace, @project) do
+        = link_to namespace_project_triggers_path(@project.namespace, @project), title: 'Triggers' do
           = icon('retweet fw')
           %span
             Triggers
       = nav_link path: 'ci_web_hooks#index' do
-        = link_to namespace_project_ci_web_hooks_path(@project.namespace, @project) do
+        = link_to namespace_project_ci_web_hooks_path(@project.namespace, @project), title: 'CI Web Hooks' do
           = icon('link fw')
           %span
             CI Web Hooks
       = nav_link path: 'ci_settings#edit' do
-        = link_to edit_namespace_project_ci_settings_path(@project.namespace, @project) do
+        = link_to edit_namespace_project_ci_settings_path(@project.namespace, @project), title: 'CI Settings' do
           = icon('building fw')
           %span
             CI Settings
       = nav_link controller: 'ci_services' do
-        = link_to namespace_project_ci_services_path(@project.namespace, @project) do
+        = link_to namespace_project_ci_services_path(@project.namespace, @project), title: 'CI Services' do
           = icon('share fw')
           %span
             CI Services