Ability to toggle sidebar on smaller screens

app/assets/javascripts/application.js.coffee

@@ -188,13 +188,9 @@ $ ->
     $container.remove()
 
   $('.navbar-toggle').on 'click', ->
-    $this = $(this);
     $('.header-content .title').toggle()
     $('.header-content .navbar-collapse').toggle()
-    if $this.toggleClass('active').hasClass('active')
-      $this.closest('header').css('z-index',100)
-    else
-      $this.closest('header').css('z-index',99)
+    $('.navbar-toggle').toggleClass('active')
 
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->

app/assets/stylesheets/framework/header.scss

@@ -23,7 +23,7 @@ header {
 
   &.navbar-gitlab {
     padding: 0 20px;
-    z-index: 99;
+    z-index: 100;
     margin-bottom: 0;
     min-height: $header-height;
     background-color: #fff;
@@ -141,9 +141,13 @@ header {
 }
 
 @media (max-width: $screen-md-max) {
-  .header-collapsed, .header-expanded {
-    @include collapsed-header;
+  .header-collapsed {
+    margin-left: $sidebar_collapsed_width;
   }
+
+ .header-expanded {
+    margin-left: $sidebar_width;
+ }
 }
 
 @media(min-width: $screen-md-max) {

app/assets/stylesheets/framework/sidebar.scss

@@ -183,20 +183,12 @@
 }
 
 @mixin expanded-sidebar {
+  padding-left: $sidebar_width;
+
   &.right-sidebar-collapsed {
     padding-right: $sidebar_collapsed_width;
   }
 
-  // when the screen is small enough
-  @media (max-width: $screen-md-max) {
-    padding-left: $sidebar_collapsed_width;
-  }
-
-  // when the screen is big enough
-  @media(min-width: $screen-md-max) {
-    padding-left: $sidebar_width;
-  }
-
   .sidebar-wrapper {
     width: $sidebar_width;