Add mobile sidebar nav

_includes/js_files.html

@@ -4,4 +4,5 @@
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
-<script async defer src="https://buttons.github.io/buttons.js"></script>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+<script src="{{ site.baseurl }}/js/page.js"></script>

_layouts/implementors.html

@@ -20,6 +20,17 @@ layout: default
         </div>
 
         <div class="col-md-8">
+
+            <nav id="small-nav" class="docs-nav d-lg-none">
+                <h4>Topics</h4>
+                <select id="small-nav-dropdown">
+                    {% assign sorted = site.implementors | sort: 'index' %}
+                    {% for post in sorted %}
+                    <option value="{{ post.url | prepend: site.baseurl }}" {% if page.title==post.title %}selected{% endif %} >{{ post.shortTitle }}</option>
+                    {% endfor %}
+                </select>
+            </nav>
+
             <h1>Implementations</h1>
             <h2>{{ page.title }}</h2>
             <div  id="markdown-content-container">{{ content }}</div>

css/main.scss

@@ -428,3 +428,10 @@ pre[class=highlight] {
 .navbar-dark .navbar-nav .nav-link {
 	color: white;
 }
+
+.docs-nav {
+	h4 {
+		display: inline-block;
+		font-size: 14px;
+	}
+}

js/page.js

@@ -0,0 +1,3 @@
+  $("#small-nav-dropdown").change(function() {
+    window.location = $(this).find("option:selected").val();
+  });