Left sidebar overlaps the content on mobile devices

app/assets/javascripts/sidebar.js.coffee

-$(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()

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;
+    margin-left: $sidebar_collapsed_width;
   }
 }
 
-@media(min-width: $screen-md-max) {
+@media(min-width: $screen-sm) {
   .header-collapsed {
     @include collapsed-header;
   }

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_collapsed_width;
+
+  @media (min-width: $screen-sm-min) {
     padding-left: $sidebar_width;
+  }
 
   &.right-sidebar-collapsed {
     /* Extra small devices (phones, less than 768px) */