Left sidebar overlaps the content on mobile devices

3 files changed, 24 insertions, 11 deletions

diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index cff309c5972..dfa69dd6a47 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -1,8 +1,8 @@
-$(document).on("click", '.toggle-nav-collapse', (e) ->
-  e.preventDefault()
-  collapsed = 'page-sidebar-collapsed'
-  expanded = 'page-sidebar-expanded'
+mobileWidth = 768
+collapsed = 'page-sidebar-collapsed'
+expanded = 'page-sidebar-expanded'
 
+toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
   $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
@@ -14,4 +14,13 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
     niceScrollBars.updateScrollBar();
   ), 300
 
+$(document).on("click", '.toggle-nav-collapse', (e) ->
+  e.preventDefault()
+
+  toggleSidebar()
 )
+
+$(document).ready ->
+  if $(window).width() < mobileWidth
+    if $('.page-with-sidebar').hasClass(expanded)
+      toggleSidebar()
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index e624982c5c9..3d3d3295615 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -141,17 +141,17 @@ header {
   margin-left: $sidebar_collapsed_width;
 }
 
-@media (max-width: $screen-md-max) {
+@media (max-width: $screen-sm) {
   .header-collapsed {
     margin-left: $sidebar_collapsed_width;
   }
 
- .header-expanded {
-    margin-left: $sidebar_width;
- }
+  .header-expanded {
+    margin-left: $sidebar_collapsed_width;
+  }
 }
 
-@media(min-width: $screen-md-max) {
+@media(min-width: $screen-sm) {
   .header-collapsed {
     @include collapsed-header;
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 6b382e4b1b2..0f83bd8b556 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -39,7 +39,7 @@
 }
 
 .sidebar-wrapper {
-  z-index: 99;
+  z-index: 999;
   background: $background-color;
 }
 
@@ -203,7 +203,11 @@
 }
 
 @mixin expanded-sidebar {
-  padding-left: $sidebar_width;
+  padding-left: $sidebar_collapsed_width;
+
+  @media (min-width: $screen-sm-min) {
+    padding-left: $sidebar_width;
+  }
 
   &.right-sidebar-collapsed {
     /* Extra small devices (phones, less than 768px) */