From 4cf4c69e8dea416ce410405d830a0efbb7495aaf Mon Sep 17 00:00:00 2001
From: ryangrahamnc <ryangrahamnc@gmail.com>
Date: Tue, 23 May 2017 11:25:58 -0400
Subject: [PATCH] fixed leftnav not responding on mobile (#309)

---
 _layouts/docs.html       |  2 +-
 _sass/layouts/_docs.scss | 15 +++++++++++++++
 js/sidemenu.js           | 19 +++++++------------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/_layouts/docs.html b/_layouts/docs.html
index cf1895d3c7..9f106f61a4 100644
--- a/_layouts/docs.html
+++ b/_layouts/docs.html
@@ -15,7 +15,7 @@ layout: default
         </div>
 
         <div id="tab-container" class="col-xs-1 tab-neg-margin pull-left">
-          <span id="sidebar-tab" class="glyphicon glyphicon-chevron-left"></span>
+          <a id="sidebar-tab" class="glyphicon glyphicon-chevron-left" href="javascript:void 0;"></a>
         </div>
 
         <div id="content-container" class="thin-left-border col-sm-9 {{ page.type }}">
diff --git a/_sass/layouts/_docs.scss b/_sass/layouts/_docs.scss
index f6f297a7e1..c5b51da7b7 100644
--- a/_sass/layouts/_docs.scss
+++ b/_sass/layouts/_docs.scss
@@ -17,6 +17,15 @@
     margin-right: 10px;
     font-size: 1rem;
     color: $black;
+
+    &, &:focus, &:hover, &:active{
+      color:black !important;
+      text-decoration: none !important;
+    }
+  }
+
+  #tab-container{
+    z-index:1000;
   }
 
   #sidebar-container {
@@ -24,4 +33,10 @@
     padding:0px;
     background-color: #fff;
   }
+
+  @media (max-width: 768px) {
+    #content-container{
+      clear:both;
+    }
+  }
 }
diff --git a/js/sidemenu.js b/js/sidemenu.js
index ce5038c251..9e3d94db60 100644
--- a/js/sidemenu.js
+++ b/js/sidemenu.js
@@ -4,7 +4,7 @@
     var sidebar = $("#sidebar-container");
     var content = $("#content-container");
     var tab = $("#tab-container");
-    var width = $(document). width();
+    var hasExpandedNavOnSmallScreen = false;
 
     function setSidebar() {
       // set sidebar height, breakpoint at iPad in landscape
@@ -13,35 +13,30 @@
     
       // 992 is the default breakpoint set in Bootstrap 3 for col-md
       var width = $(document).width();
-      if (width < 992) {
+      if (width < 992 && !hasExpandedNavOnSmallScreen) {
         sidebar.hide();
         sidebarOpen = false;
       }
     }
 
     $(document).on('click', '#sidebar-tab', function() {
+      hasExpandedNavOnSmallScreen = true;
       $(this).toggleClass('glyphicon-chevron-right');
       $(this).toggleClass('glyphicon-chevron-left');
       sidebar.toggle(250);
       sidebarOpen = !sidebarOpen;
 
       if (!sidebarOpen) {
-        tab.removeClass("col-xs-1");
-        tab.removeClass("tab-neg-margin");
-        tab.removeClass("pull-left");
+        tab.removeClass("col-xs-1 tab-neg-margin pull-left");
 
-        content.removeClass("thin-left-border");
-        content.removeClass("col-sm-9");
+        content.removeClass("thin-left-border col-sm-9");
         content.addClass("col-sm-11");
       }
       else {
-        tab.addClass("col-xs-1");
-        tab.addClass("tab-neg-margin");
-        tab.addClass("pull-left");
+        tab.addClass("col-xs-1 tab-neg-margin pull-left");
         
         content.removeClass("col-sm-11");
-        content.addClass("thin-left-border");
-        content.addClass("col-sm-9");
+        content.addClass("thin-left-border col-sm-9");
       }
     });