Merge branch 'pinned-sidebar' into 'master'

Pinned sidebar navigation option

## What does this MR do?

Gives the ability to pin the sidebar navigation. Pinning is only possible on screens with above `lg` which is `1200px` if not it reverts to being hidden by default.

## What are the relevant issue numbers?

Closes #18542 

## Screenshots (if relevant)

### Un-pinned

![Screen_Shot_2016-06-15_at_17.29.08](/uploads/82b7495df6ea46a2334a7c25d03b019b/Screen_Shot_2016-06-15_at_17.29.08.png)

### Pinned

![Screen_Shot_2016-06-15_at_17.29.41](/uploads/3eb381be807985d0a9583f000cb802f9/Screen_Shot_2016-06-15_at_17.29.41.png)

See merge request !4683

app/assets/javascripts/application.js.coffee

@@ -128,7 +128,7 @@ $ ->
   gl.utils.preventDisabledButtons()
   bootstrapBreakpoint = bp.getBreakpointSize()
 
-  $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
+  $(".nav-sidebar").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
 
   # Click a .js-select-on-focus field, select the contents
   $(".js-select-on-focus").on "focusin", ->
@@ -258,3 +258,31 @@ $ ->
   gl.awardsHandler = new AwardsHandler()
   checkInitialSidebarSize()
   new Aside()
+
+  # Sidenav pinning
+  if $(window).width() < 1440 and $.cookie('pin_nav') is 'true'
+    $.cookie('pin_nav', 'false')
+    $('.page-with-sidebar')
+      .toggleClass('page-sidebar-collapsed page-sidebar-expanded')
+      .removeClass('page-sidebar-pinned')
+    $('.navbar-fixed-top').removeClass('header-pinned-nav')
+
+  $(document)
+    .off 'click', '.js-nav-pin'
+    .on 'click', '.js-nav-pin', (e) ->
+      e.preventDefault()
+
+      $(this).toggleClass 'is-active'
+
+      if $.cookie('pin_nav') is 'true'
+        $.cookie 'pin_nav', 'false'
+        $('.page-with-sidebar')
+          .removeClass('page-sidebar-pinned')
+          .toggleClass('page-sidebar-collapsed page-sidebar-expanded')
+        $('.navbar-fixed-top')
+          .removeClass('header-pinned-nav')
+          .toggleClass('header-collapsed header-expanded')
+      else
+        $.cookie 'pin_nav', 'true'
+        $('.page-with-sidebar').addClass('page-sidebar-pinned')
+        $('.navbar-fixed-top').addClass('header-pinned-nav')

app/assets/javascripts/sidebar.js.coffee

@@ -3,13 +3,33 @@ expanded = 'page-sidebar-expanded'
 
 toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
-  $('header').toggleClass("header-collapsed header-expanded")
+  $('.navbar-fixed-top').toggleClass("header-collapsed header-expanded")
+
+  if $.cookie('pin_nav') is 'true'
+    $('.navbar-fixed-top').toggleClass('header-pinned-nav')
+    $('.page-with-sidebar').toggleClass('page-sidebar-pinned')
 
   setTimeout ( ->
-    niceScrollBars = $('.nicescroll').niceScroll();
+    niceScrollBars = $('.nav-sidebar').niceScroll();
     niceScrollBars.updateScrollBar();
   ), 300
 
+$(document)
+  .off 'click', 'body'
+  .on 'click', 'body', (e) ->
+    unless $.cookie('pin_nav') is 'true'
+      $target = $(e.target)
+      $nav = $target.closest('.sidebar-wrapper')
+      pageExpanded = $('.page-with-sidebar').hasClass('page-sidebar-expanded')
+      $toggle = $target.closest('.toggle-nav-collapse, .side-nav-toggle')
+
+      if $nav.length is 0 and pageExpanded and $toggle.length is 0
+        $('.page-with-sidebar')
+          .toggleClass('page-sidebar-collapsed page-sidebar-expanded')
+
+        $('.navbar-fixed-top')
+          .toggleClass('header-collapsed header-expanded')
+
 $(document).on("click", '.toggle-nav-collapse, .side-nav-toggle', (e) ->
   e.preventDefault()
 

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

@@ -8,8 +8,8 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-
-    .collapse-nav a {
+    .toggle-nav-collapse,
+    .pin-nav-btn {
       color: $color-light;
       background: $color;
 

app/assets/stylesheets/framework/header.scss

@@ -3,7 +3,7 @@
  *
  */
 header {
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
 
   &.navbar-empty {
     height: $header-height;
@@ -79,14 +79,9 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
-
-      .side-nav-toggle {
-        display: block;
-      }
     }
 
     .side-nav-toggle {
-      display: none;
       position: absolute;
       left: -10px;
       margin: 6px 0;
@@ -108,9 +103,7 @@ header {
   .header-content {
     position: relative;
     height: $header-height;
-    padding-right: 40px;
     padding-left: 30px;
-    transition-duration: .3s;
 
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
@@ -198,18 +191,6 @@ header {
   }
 }
 
-.header-collapsed {
-  margin-left: 0;
-
-  .header-content {
-
-    @media (min-width: $screen-sm-max) {
-      padding-left: 30px;
-      transition-duration: .3s;
-    }
-  }
-}
-
 .tanuki-shape {
   transition: all 0.8s;
 

app/assets/stylesheets/framework/nav.scss

@@ -251,7 +251,7 @@
   z-index: 11;
   background: $background-color;
   border-bottom: 1px solid $border-color;
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
   text-align: center;
 
   .container-fluid {

app/assets/stylesheets/framework/sidebar.scss

 .page-with-sidebar {
   padding-top: $header-height;
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
 
   .sidebar-wrapper {
     position: fixed;
     top: 0;
     bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
     left: 0;
     height: 100%;
-    transition-duration: .3s;
+    overflow: hidden;
+    transition: width $sidebar-transition-duration;
   }
 }
 
 .sidebar-wrapper {
   z-index: 1000;
   background: $background-color;
+
+  .nicescroll-rails-hr {
+    // TODO: Figure out why nicescroll doesn't hide horizontal bar
+    display: none!important;
+  }
 }
 
 .content-wrapper {
   width: 100%;
+  transition: padding $sidebar-transition-duration;
 
   .container-fluid {
     background: #fff;
@@ -34,22 +39,19 @@
   }
 }
 
-.sidebar-wrapper {
-
-  .sidebar-user {
-    padding: 15px 22px;
-    position: fixed;
+.sidebar-user {
+  padding: 15px;
+  position: absolute;
+  left: 0;
   bottom: 0;
   width: $sidebar_width;
   overflow: hidden;
-    transition-duration: .3s;
-
-    .username {
-      margin-left: 10px;
-      width: $sidebar_width - 2 * 10px;
   font-size: 16px;
-      line-height: 34px;
-    }
+  line-height: 36px;
+  transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
+
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 50px;
   }
 }
 
@@ -65,19 +67,22 @@
 
 
 .nav-sidebar {
-  margin-top: 22 + $header-height;
-  margin-bottom: 116px;
-  transition-duration: .3s;
-  list-style: none;
-  overflow: hidden;
+  position: absolute;
+  top: 50px;
+  bottom: 65px;
+  width: $sidebar_width;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 115px;
+  }
 
   &.navbar-collapse {
     padding: 0 !important;
   }
 
   li {
-    width: $sidebar_width;
-
     &.separate-item {
       padding-top: 10px;
       margin-top: 10px;
@@ -90,20 +95,18 @@
     }
 
     a {
-      width: $sidebar_width;
-      padding: 7px 15px 7px 23px;
+      padding: 7px 15px 7px 12px;
       font-size: $gl-font-size;
       line-height: 24px;
       display: block;
       text-decoration: none;
       font-weight: normal;
       outline: none;
+      white-space: nowrap;
 
-      &:hover {
-        text-decoration: none;
-      }
-
-      &:active, &:focus {
+      &:hover,
+      &:active,
+      &:focus {
         text-decoration: none;
       }
 
@@ -115,10 +118,6 @@
       svg {
         margin-right: 13px;
       }
-
-      &.back-link i {
-        transition-duration: .3s;
-      }
     }
   }
 
@@ -129,101 +128,86 @@
   }
 }
 
-.sidebar-subnav {
-  margin-left: 0;
-  padding-left: 0;
-
-  li {
-    list-style: none;
-  }
-}
-
-.collapse-nav a {
+.toggle-nav-collapse {
   width: $sidebar_width;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
+  min-height: 50px;
   padding: 5px 0;
   font-size: 18px;
-  background: transparent;
-  height: 50px;
-  text-align: center;
-  line-height: 40px;
+  line-height: 30px;
+}
+
+.nav-header-btn {
+  padding: 10px 5px;
+  color: inherit;
   transition-duration: .3s;
-  outline: none;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    color: $white-light;
     text-decoration: none;
   }
 }
 
-.sidebar-wrapper {
-  &.hidden-nav {
-    width: 0;
-  }
-}
-
-.page-sidebar-collapsed {
-  padding-left: 0;
-
-  .sidebar-wrapper {
-    width: 0;
-
-    .nav-sidebar {
-      width: 0;
-
-      li {
-        width: auto;
-
-        a {
-          span {
+.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;
   }
 
-    .collapse-nav a {
-      width: 0;
+  .fa {
+    transition: transform .15s;
+  }
 
-      i {
-        display: none;
+  &.is-active {
+    .fa {
+      transform: rotate(90deg);
     }
   }
+}
 
-    .sidebar-user {
-      width: 0;
+.page-sidebar-collapsed {
   padding-left: 0;
-      padding-right: 0;
 
-      .username {
-        display: none;
-      }
-    }
+  .sidebar-wrapper {
+    width: 0;
   }
 }
 
 .page-sidebar-expanded {
-
-  @media (max-width: $screen-sm-max) {
-    padding-left: 0;
-  }
-
   .sidebar-wrapper {
     width: $sidebar_width;
+  }
+}
 
-    .nav-sidebar {
-      width: $sidebar_width;
+.page-sidebar-pinned {
+  .content-wrapper,
+  .layout-nav {
+    @media (min-width: $sidebar-breakpoint) {
+      padding-left: $sidebar_width;
+    }
   }
+}
 
-    .nav-sidebar li a {
-      width: $sidebar_width;
+header.header-pinned-nav {
+  @media (min-width: $sidebar-breakpoint) {
+    padding-left: ($sidebar_width + $gl-padding);
 
-      &.back-link {
-        i {
-          opacity: 0;
-        }
+    .side-nav-toggle {
+      display: none;
     }
+
+    .header-content {
+      padding-left: 0;
     }
   }
 }

app/assets/stylesheets/framework/variables.scss

@@ -6,6 +6,8 @@ $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
+$sidebar-transition-duration: .15s;
+$sidebar-breakpoint: 1440px;
 
 /*
  * UI elements

app/helpers/nav_helper.rb

@@ -12,10 +12,10 @@ module NavHelper
   end
 
   def page_sidebar_class
-    if nav_menu_collapsed?
-      "page-sidebar-collapsed"
+    if pinned_nav?
+      "page-sidebar-expanded page-sidebar-pinned"
     else
-      "page-sidebar-expanded"
+      "page-sidebar-collapsed"
     end
   end
 
@@ -36,7 +36,15 @@ module NavHelper
   end
 
   def nav_header_class
-    class_name = " with-horizontal-nav" if defined?(nav) && nav
+    class_name = ''
+    class_name << " with-horizontal-nav" if defined?(nav) && nav
+
+    if pinned_nav?
+      class_name << " header-expanded header-pinned-nav"
+    else
+      class_name << " header-collapsed"
+    end
+
     class_name
   end
 
@@ -47,4 +55,8 @@ module NavHelper
   def nav_control_class
     "nav-control" if current_user
   end
+
+  def pinned_nav?
+    cookies[:pin_nav] == 'true'
+  end
 end

app/views/layouts/_collapse_button.html.haml

-= link_to icon('bars'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
+= 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.page-sidebar-collapsed{ class: "#{page_gutter_class}" }
+.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-
+    = render partial: 'layouts/collapse_button'
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
     - elsif current_user
@@ -8,13 +8,14 @@
     - else
       = render 'layouts/nav/explore'
 
-    .collapse-nav
-      = 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 s36'
         .username
           = current_user.username
+    = link_to '#', class: "nav-header-btn text-center pin-nav-btn #{'is-active' if pinned_nav?} js-nav-pin", title: 'Pin/Unpin navigation' do
+      %span.sr-only Toggle navigation pinning
+      = icon('thumb-tack')
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid

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

-%header.navbar.navbar-fixed-top.navbar-gitlab.header-collapsed{ class: nav_header_class }
+%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
   %div{ class: fluid_layout ? "container-fluid" : "container-fluid" }
     .header-content
       %button.side-nav-toggle{type: 'button'}