Merge branch 'jasonblanchard-collapseable-nav' into 'master'

Collapseable sidebar

See merge request !1465

CHANGELOG

@@ -62,6 +62,7 @@ v 7.8.0
   - 
   - 
   - Added support for firing system hooks on group create/destroy and adding/removing users to group (Boyan Tabakov)
+  - Added persistent collapse button for left side nav bar (Jason Blanchard)
 
 v 7.7.2
   - Update GitLab Shell to version 2.4.2 that fixes a bug when developers can push to protected branch

app/assets/javascripts/sidebar.js.coffee

@@ -24,3 +24,18 @@ $ ->
 $(window).resize ->
   responsive_resize()
   return
+
+$(document).on("click", '.toggle-nav-collapse', (e) ->
+  e.preventDefault()
+  collapsed = 'page-sidebar-collapsed'
+  expanded = 'page-sidebar-expanded'
+
+  if $('.page-with-sidebar').hasClass(collapsed)
+    $('.page-with-sidebar').removeClass(collapsed).addClass(expanded)
+    $('.toggle-nav-collapse i').removeClass('fa-angle-right').addClass('fa-angle-left')
+    $.cookie("collapsed_nav", "false", { path: '/' })
+  else
+    $('.page-with-sidebar').removeClass(expanded).addClass(collapsed)
+    $('.toggle-nav-collapse i').removeClass('fa-angle-left').addClass('fa-angle-right')
+    $.cookie("collapsed_nav", "true", { path: '/' })
+)

app/assets/stylesheets/sections/nav_sidebar.scss

-
-
 .page-with-sidebar {
   background: #F5F5F5;
 
@@ -101,9 +99,7 @@
 }
 
 @mixin expanded-sidebar {
-  .page-with-sidebar {
-    padding-left: $sidebar_width;
-  }
+  padding-left: $sidebar_width;
 
   .sidebar-wrapper {
     width: $sidebar_width;
@@ -122,9 +118,7 @@
 }
 
 @mixin folded-sidebar {
-  .page-with-sidebar {
-    padding-left: 50px;
-  }
+  padding-left: 50px;
 
   .sidebar-wrapper {
     width: 52px;
@@ -150,10 +144,33 @@
   }
 }
 
+.collapse-nav a {
+  position: fixed;
+  bottom: 15px;
+  padding: 10px;
+  background: #DDD;
+}
+
 @media (max-width: $screen-md-max) {
-  @include folded-sidebar;
+  .page-sidebar-collapsed {
+    @include folded-sidebar;
+  }
+
+  .page-sidebar-expanded {
+    @include folded-sidebar;
+  }
+
+  .collapse-nav {
+    display: none;
+  }
 }
 
 @media(min-width: $screen-md-max) {
-  @include expanded-sidebar;
+  .page-sidebar-collapsed {
+    @include folded-sidebar;
+  }
+
+  .page-sidebar-expanded {
+    @include expanded-sidebar;
+  }
 }

app/helpers/application_helper.rb

@@ -315,4 +315,12 @@ module ApplicationHelper
       profile_key_path(key)
     end
   end
+
+  def nav_sidebar_class
+    if nav_menu_collapsed?
+      "page-sidebar-collapsed"
+    else
+      "page-sidebar-expanded"
+    end
+  end
 end

app/helpers/nav_helper.rb

+module NavHelper
+  def nav_menu_collapsed?
+    cookies[:collapsed_nav] == 'true'
+  end
+end

app/views/layouts/_collapse_button.html.haml

+- if nav_menu_collapsed?
+  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse'
+- else
+  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse'

app/views/layouts/_page.html.haml

 - if defined?(sidebar)
-  .page-with-sidebar
+  .page-with-sidebar{ class: nav_sidebar_class }
     = render "layouts/broadcast"
     .sidebar-wrapper
       = render(sidebar)
+      .collapse-nav
+        = render partial: 'layouts/collapse_button'
     .content-wrapper
       .container-fluid
         .content

spec/helpers/nav_helper_spec.rb

+require 'spec_helper'
+
+# Specs in this file have access to a helper object that includes
+# the NavHelper. For example:
+#
+# describe NavHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+describe NavHelper do
+  describe '#nav_menu_collapsed?' do
+    it 'returns true when the nav is collapsed in the cookie' do
+      helper.request.cookies[:collapsed_nav] = 'true'
+      expect(helper.nav_menu_collapsed?).to eq true
+    end
+
+    it 'returns false when the nav is not collapsed in the cookie' do
+      helper.request.cookies[:collapsed_nav] = 'false'
+      expect(helper.nav_menu_collapsed?).to eq false
+    end
+  end
+end