From e9f016ac0f691112e8e6b192ddfeb096581da6bf Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@dc-square.de>
Date: Sun, 12 May 2019 21:49:19 +0200
Subject: [PATCH] Improved responsiveness of sidebar

---
 _sass/layout.scss             |  4 ++--
 _sass/support/_variables.scss | 25 +++++++++++++------------
 assets/js/just-the-docs.js    |  3 ++-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/_sass/layout.scss b/_sass/layout.scss
index 068b6ab..0dc4c08 100644
--- a/_sass/layout.scss
+++ b/_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) {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 59a7c4e..4e1bf8d 100644
--- a/_sass/support/_variables.scss
+++ b/_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;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index bc0a635..a8ae98e 100644
--- a/assets/js/just-the-docs.js
+++ b/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');