Sidebar overlaps content when screen is below 1200px.

When screen is below 1200px, the sidebar overlaps.
When screen is above 1200px, the sidebar pushes content out.
z-index change to make sure hamburger stays on top.
Fixes #12717

3 files changed, 22 insertions, 67 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 367bd098bfd..dde71f33d2e 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -188,9 +188,13 @@ $ ->
     $container.remove()
 
   $('.navbar-toggle').on 'click', ->
+    $this = $(this);
     $('.header-content .title').toggle()
     $('.header-content .navbar-collapse').toggle()
-    $('.navbar-toggle').toggleClass('active')
+    if $this.toggleClass('active').hasClass('active')
+      $this.closest('header').css('z-index',100)
+    else
+      $this.closest('header').css('z-index',99)
 
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a81e258573d..93d74bf30f1 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: 100;
+    z-index: 99;
     margin-bottom: 0;
     min-height: $header-height;
     background-color: #fff;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b141928f706..194bd803930 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -45,19 +45,6 @@
     overflow: hidden;
     transition-duration: .3s;
 
-    .home {
-      z-index: 1;
-      position: absolute;
-      left: 0px;
-    }
-
-    #logo {
-      z-index: 2;
-      position: absolute;
-      width: 58px;
-      cursor: pointer;
-    }
-
     a {
       float: left;
       height: $header-height;
@@ -83,7 +70,7 @@
           width: 158px;
           float: left;
           margin: 0;
-          margin-left: 50px;
+          margin-left: 14px;
           font-size: 19px;
           line-height: 41px;
           font-weight: normal;
@@ -192,7 +179,16 @@
 }
 
 @mixin expanded-sidebar {
-  padding-left: $sidebar_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;
@@ -213,14 +209,6 @@
   }
 }
 
-@mixin expanded-gutter {
-  padding-right: $gutter_width;
-}
-
-@mixin collapsed-gutter {
-  padding-right: $sidebar_collapsed_width;
-}
-
 @mixin collapsed-sidebar {
   padding-left: $sidebar_collapsed_width;
 
@@ -287,47 +275,10 @@
   background: #f2f6f7;
 }
 
-// page is small enough
-@media (max-width: $screen-md-max) {
-  .page-sidebar-collapsed {
-    @include collapsed-sidebar;
-  }
-
-  .page-sidebar-expanded {
-    @include collapsed-sidebar;
-  }
-
-  .page-gutter {
-    &.right-sidebar-collapsed {
-      @include collapsed-gutter;
-    }
-    &.right-sidebar-expanded {
-      @include expanded-gutter;
-    }
-  }
-
-  .collapse-nav {
-    display: none;
-  }
+.page-sidebar-collapsed {
+  @include collapsed-sidebar;
 }
 
-// page is large enough
-@media(min-width: $screen-md-max) {
-
-  .page-gutter {
-    &.right-sidebar-collapsed {
-      @include collapsed-gutter;
-    }
-    &.right-sidebar-expanded {
-      @include expanded-gutter;
-    }
-  }
-
-  .page-sidebar-collapsed {
-    @include collapsed-sidebar;
-  }
-
-  .page-sidebar-expanded {
-    @include expanded-sidebar;
-  }
-}
\ No newline at end of file
+.page-sidebar-expanded {
+  @include expanded-sidebar;
+}