Ability to toggle sidebar on smaller screens

3 files changed, 12 insertions, 20 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index dde71f33d2e..0651bd20d26 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/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) ->
@@ -214,7 +210,7 @@ $ ->
     $this = $(this)
     $this.attr 'value', $this.val()
     return
-    
+
   $(document)
     .off 'keyup', 'input[type="search"]'
     .on 'keyup', 'input[type="search"]' , (e) ->
@@ -257,7 +253,7 @@ $ ->
         $('.page-with-sidebar')
           .removeClass('right-sidebar-collapsed')
           .addClass('right-sidebar-expanded')
-      $.cookie("collapsed_gutter", 
+      $.cookie("collapsed_gutter",
         $('.right-sidebar')
           .hasClass('right-sidebar-collapsed'), { path: '/' })
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 93d74bf30f1..c2676cd1cc3 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/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) {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e2b978b50bd..e0ccd6f100f 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/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;