responsive sidebar on dashboard

app/assets/javascripts/sidebar.js.coffee

@@ -1,11 +1,12 @@
 responsive_resize = ->
   current_width = $(window).width()
   if current_width < 985
-    $('.side').addClass("ui right wide sidebar")
+    $('.responsive-side').addClass("ui right wide sidebar")
   else
-    $('.side').removeClass("ui right wide sidebar")
+    $('.responsive-side').removeClass("ui right wide sidebar")
 
 $ ->
+  # Depending on window size, set the sidebar offscreen.
   responsive_resize()
 
   $('.ui.sidebar')
@@ -22,6 +23,7 @@ $ ->
     container.sidebar "hide"  if not container.is(e.target) and container.has(e.target).length is 0
     return
 
+# On resize, check if sidebar should be offscreen.
 $(window).resize ->
   responsive_resize()
   return

app/assets/stylesheets/generic/sidebar.scss

@@ -7,12 +7,11 @@
 }
 
 .sidebar-expand-button {
-  background: #fff;
+  background: #f9f9f9;
   color: #555;
-  padding: 10px 15px;
+  padding: 9px 12px 6px 14px;
   border: 1px solid #E1E1E1;
   border-right: 0;
-  border-radius: 3px;
   position: fixed;
   top: 108px;
   right: 0px;
@@ -22,7 +21,6 @@
   -moz-transition: all 0.4s;
   -webkit-transition: all 0.4s;
 
-
   &:hover {
     background: #ddd;
     color: #333;

app/views/dashboard/show.html.haml

@@ -2,7 +2,7 @@
   .dashboard.row
     .activities.col-md-8
       = render 'activities'
-    .side.col-md-4
+    .side.col-md-4.responsive-side
       = render 'sidebar'
 
   .sidebar-expand-button.hidden-lg.hidden-md