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

2 files changed, 51 insertions, 3 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index cb7d11ad472..2f9f6c3ef5b 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -124,7 +124,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", ->
@@ -254,3 +254,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')
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index 2ce63c16428..68009e58645 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/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()