Merge branch '19659-sidebar-improvements' into 'master'

Resolve "Possible sidebar improvements based"

## What does this MR do?
Cleans up the sidebar

## Are there points in the code the reviewer needs to double check?
@dzaporozhets it looks like your screenshot has more padding on the left and right of the sidebar, but if you do that then the hamburger icon doesn't match the placement on the top nav, and it makes it look like icon is shifting back and forth. 

## What are the relevant issue numbers?
Part of #19659 

## Screenshots (if relevant)
![nav](/uploads/693d8a21bac464fc7dd40a51cb7dccda/nav.gif)

See merge request !5211

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

@@ -11,7 +11,6 @@
     .toggle-nav-collapse,
     .pin-nav-btn {
       color: $color-light;
-      background: $color;
 
       &:hover {
         color: $white-light;

app/assets/stylesheets/framework/sidebar.scss

@@ -17,7 +17,7 @@
     height: 100%;
     overflow: hidden;
     transition: width $sidebar-transition-duration;
-    @include box-shadow(2px 0 16px 0 #bbb);
+    @include box-shadow(2px 0 16px 0 $black-transparent);
   }
 }
 
@@ -76,7 +76,7 @@
     }
 
     a {
-      padding: 7px 15px 7px 12px;
+      padding: 7px 16px;
       font-size: $gl-font-size;
       line-height: 24px;
       display: block;
@@ -108,7 +108,7 @@
   }
 }
 
-.toggle-nav-collapse {
+.sidebar-action-buttons {
   width: $sidebar_width;
   position: absolute;
   top: 0;
@@ -117,12 +117,37 @@
   padding: 5px 0;
   font-size: 18px;
   line-height: 30px;
+
+  .toggle-nav-collapse {
+    left: 0;
+  }
+
+  .pin-nav-btn {
+    right: 0;
+    display: none;
+
+    @media (min-width: $sidebar-breakpoint) {
+      display: block;
+    }
+
+    .fa {
+      transition: transform .15s;
+    }
+
+    &.is-active {
+      .fa {
+        transform: rotate(90deg);
+      }
+    }
+  }
 }
 
 .nav-header-btn {
-  padding: 10px 5px;
+  padding: 10px 16px;
   color: inherit;
   transition-duration: .3s;
+  position: absolute;
+  top: 0;
 
   &:hover,
   &:focus {
@@ -131,30 +156,6 @@
   }
 }
 
-.pin-nav-btn {
-  display: none;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 50px;
-  width: $sidebar_width;
-  line-height: 30px;
-
-  @media (min-width: $sidebar-breakpoint) {
-    display: block;
-  }
-
-  .fa {
-    transition: transform .15s;
-  }
-
-  &.is-active {
-    .fa {
-      transform: rotate(90deg);
-    }
-  }
-}
-
 .page-sidebar-collapsed {
   padding-left: 0;
 

app/views/layouts/_collapse_button.html.haml

-= link_to '#', class: 'nav-header-btn text-center toggle-nav-collapse', title: "Open/Close" do
-  %span.sr-only Toggle navigation
-  = icon('bars')

app/views/layouts/_page.html.haml

 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    = render partial: 'layouts/collapse_button'
+    .sidebar-action-buttons
+      = link_to '#', class: 'nav-header-btn toggle-nav-collapse', title: "Open/Close" do
+        %span.sr-only Toggle navigation
+        = icon('bars')
+      = link_to '#', class: "nav-header-btn pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: {placement: 'right', container: 'body'} do
+        %span.sr-only Toggle navigation pinning
+        = icon('thumb-tack')
+
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
     - elsif current_user
@@ -8,9 +15,6 @@
     - else
       = render 'layouts/nav/explore'
 
-    = link_to '#', class: "nav-header-btn text-center pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: {placement: 'right', container: 'body'} do
-      %span.sr-only Toggle navigation pinning
-      = icon('thumb-tack')
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid

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: "#{project_tab_class} home"}) do
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
-      .icon-container
-        = navbar_icon('project')
       %span
         Projects
   = nav_link(controller: :todos) do
     = link_to dashboard_todos_path, title: 'Todos' do
-      .icon-container
-        = icon('bell fw')
       %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
-      .icon-container
-        = navbar_icon('activity')
       %span
         Activity
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
-      .icon-container
-        = navbar_icon('group')
       %span
         Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
-      .icon-container
-        = navbar_icon('milestones')
       %span
         Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
-      .icon-container
-        = navbar_icon('issues')
       %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
-      .icon-container
-        = navbar_icon('mr')
       %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-container
-        = icon('clipboard fw')
       %span
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
-      .icon-container
-        = icon('question-circle fw')
       %span
         Help
   = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
-      .icon-container
-        = icon('user fw')
       %span
         Profile Settings