Improve collapsing sidebar

app/assets/javascripts/sidebar.js.coffee

@@ -27,10 +27,15 @@ $(window).resize ->
 
 $(document).on("click", '.toggle-nav-collapse', (e) ->
   e.preventDefault()
-  if $('.page-with-sidebar').hasClass('collapsed')
-    $('.page-with-sidebar').removeClass('collapsed')
+  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').addClass('collapsed')
+    $('.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,16 +99,14 @@
 }
 
 @mixin expanded-sidebar {
-  .page-with-sidebar {
   padding-left: $sidebar_width;
-  }
 
   .sidebar-wrapper {
     width: $sidebar_width;
 
     .nav-sidebar {
       margin-top: 20px;
-      position: relative;
+      position: fixed;
       top: 45px;
       width: $sidebar_width;
     }
@@ -122,9 +118,7 @@
 }
 
 @mixin folded-sidebar {
-  .page-with-sidebar {
   padding-left: 50px;
-  }
 
   .sidebar-wrapper {
     width: 52px;
@@ -150,47 +144,33 @@
   }
 }
 
-.collapse-nav {
-  position: relative;
-  top: 50px;
-  width: 230px;
-  text-align: right;
-  padding-right: 21px;
+.collapse-nav a {
+  position: fixed;
+  bottom: 15px;
+  padding: 10px;
+  background: #DDD;
 }
 
-.page-with-sidebar.collapsed {
-
-  .collapse-nav {
-    width: 53px;
+@media (max-width: $screen-md-max) {
+  .page-sidebar-collapsed {
+    @include folded-sidebar;
   }
 
-  padding-left: 50px;
-
-  .sidebar-wrapper {
-    width: 52px;
-    overflow-x: hidden;
-
-    .nav-sidebar {
-      width: 52px;
+  .page-sidebar-expanded {
+    @include folded-sidebar;
   }
 
-    .nav-sidebar li a > span {
+  .collapse-nav {
     display: none;
   }
-  }
 }
 
-
-@media (max-width: $screen-md-max) {
+@media(min-width: $screen-md-max) {
+  .page-sidebar-collapsed {
     @include folded-sidebar;
-}
+  }
 
-@media(min-width: $screen-md-max) {
+  .page-sidebar-expanded {
     @include expanded-sidebar;
-}
-
-@media (max-width: $screen-md-max) {
-  .collapse-nav {
-    display: none;
   }
 }

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/views/layouts/_collapse_button.html.haml

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

app/views/layouts/_page.html.haml

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