Improved responsiveness of sidebar

_sass/layout.scss

@@ -24,7 +24,7 @@
   @include mq(md) {
     flex-wrap: nowrap;
     position: absolute;
-    width: $nav-width;
+    width: $nav-width-md;
     height: 100%;
     flex-direction: column;
     border-right: $border $border-color;
@@ -54,7 +54,7 @@
   @include mq(md) {
     position: relative;
     max-width: $content-width;
-    margin-left: $nav-width;
+    margin-left: $nav-width-md;
   }
 
   @include mq(lg) {

_sass/support/_variables.scss

@@ -61,18 +61,6 @@ $link-color: $purple-000 !default;
 $btn-primary-color: $purple-100 !default;
 $base-button-color: #f7f7f7 !default;
 
-//
-// Media queries in pixels
-//
-
-$media-queries: (
-  xs: 320px,
-  sm: 500px,
-  md: 740px,
-  lg: 1120px,
-  xl: 1400px
-) !default;
-
 //
 // Spacing
 //
@@ -119,5 +107,18 @@ $border-color: $grey-lt-100 !default;
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
+$nav-width-md: 248px !default;
 $content-width: 800px !default;
 $header-height: 60px !default;
+
+//
+// Media queries in pixels
+//
+
+$media-queries: (
+  xs: 320px,
+  sm: 500px,
+  md: $content-width,
+  lg: $content-width + $nav-width,
+  xl: 1400px
+) !default;

assets/js/just-the-docs.js

@@ -14,7 +14,8 @@ function toggleNav(){
   const pageHeader = document.querySelector('.js-page-header');
   const navTrigger = document.querySelector('.js-main-nav-trigger');
 
-  addEvent(navTrigger, 'click', function(){
+  addEvent(navTrigger, 'click', function(e){
+    e.preventDefault();
     var text = navTrigger.innerText;
     var textToggle = navTrigger.getAttribute('data-text-toggle');