Add a fixed sidebar with anchor navigation to the sidebar.

Borrowed from the Bootstrap doc implementation.

docs/_includes/head.html

@@ -20,6 +20,148 @@
 <link href="vendor/css/anchor.css" type="text/css" rel="stylesheet" />
 
 <style type="text/css">
+  /*
+   * Side navigation
+   *
+   * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+   * sections of docs content.
+   */
+
+  /* By default it's not affixed in mobile views, so undo that */
+  .s2-docs-sidebar.affix {
+    position: static;
+  }
+  @media (min-width: 768px) {
+    .s2-docs-sidebar {
+      padding-left: 20px;
+    }
+  }
+
+  /* First level of nav */
+  .s2-docs-sidenav {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  /* All levels of nav */
+  .s2-docs-sidebar .nav > li > a {
+    margin-left: -1px;
+    display: block;
+    padding: 4px 20px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #767676;
+  }
+  .s2-docs-sidebar .nav > li > a code {
+    background-color: inherit;
+    color: #666;
+  }
+  .s2-docs-sidebar .nav > li > a:hover,
+  .s2-docs-sidebar .nav > li > a:focus {
+    padding-left: 19px;
+    color: #428BCA;
+    text-decoration: none;
+    background-color: transparent;
+    border-left: 1px solid #428BCA;
+  }
+  .s2-docs-sidebar .nav > .active > a,
+  .s2-docs-sidebar .nav > .active:hover > a,
+  .s2-docs-sidebar .nav > .active:focus > a {
+    padding-left: 18px;
+    font-weight: bold;
+    color: #428BCA;
+    background-color: transparent;
+    border-left: 2px solid #428BCA;
+  }
+
+  /* Nav: second level (shown on .active) */
+  .s2-docs-sidebar .nav .nav {
+    display: none; /* Hide by default, but at >768px, show it */
+    padding-bottom: 10px;
+  }
+  .s2-docs-sidebar .nav .nav > li > a {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 30px;
+    font-size: 12px;
+    font-weight: normal;
+  }
+  .s2-docs-sidebar .nav .nav > li > a:hover,
+  .s2-docs-sidebar .nav .nav > li > a:focus {
+    padding-left: 29px;
+  }
+  .s2-docs-sidebar .nav .nav > .active > a,
+  .s2-docs-sidebar .nav .nav > .active:hover > a,
+  .s2-docs-sidebar .nav .nav > .active:focus > a {
+    padding-left: 28px;
+    font-weight: 500;
+  }
+
+  /* Back to top (hidden on mobile) */
+  .back-to-top,
+  .s2-docs-theme-toggle {
+    display: none;
+    padding: 4px 10px;
+    margin-top: 10px;
+    margin-left: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #999;
+  }
+  .back-to-top:hover,
+  .s2-docs-theme-toggle:hover {
+    color: #428BCA;
+    text-decoration: none;
+  }
+  .s2-docs-theme-toggle {
+    margin-top: 0;
+  }
+
+  @media (min-width: 768px) {
+    .back-to-top,
+    .s2-docs-theme-toggle {
+      display: block;
+    }
+  }
+
+  /* Show and affix the side nav when space allows it */
+  @media (min-width: 992px) {
+    .s2-docs-sidebar .s2-docs-sidenav {
+      border-left: 1px solid #eee;
+      padding-top: 40px;
+    }
+
+    .s2-docs-sidebar .nav > .active > ul {
+      display: block;
+    }
+    /* Widen the fixed sidebar */
+    .s2-docs-sidebar.affix,
+    .s2-docs-sidebar.affix-bottom {
+      width: 213px;
+    }
+    .s2-docs-sidebar.affix {
+      position: fixed; /* Undo the static from mobile first approach */
+      top: 0px;
+    }
+    .s2-docs-sidebar.affix-bottom {
+      position: absolute; /* Undo the static from mobile first approach */
+    }
+    .s2-docs-sidebar.affix-bottom .s2-docs-sidenav,
+    .s2-docs-sidebar.affix .s2-docs-sidenav {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  @media (min-width: 1200px) {
+    /* Widen the fixed sidebar again */
+    .s2-docs-sidebar.affix-bottom,
+    .s2-docs-sidebar.affix {
+      width: 263px;
+    }
+  }
+
+
+
   /* Footer */
   .s2-docs-footer {
     border-top: 1px solid #E5E5E5;
@@ -63,14 +205,18 @@
   }
 
   .jumbotron {
-    background-color: #428BCA;
-    color: #fff;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+  }
+
+  .jumbotron h1 {
+    font-size: 48px;
   }
 
   .btn-outline-inverse {
-    color: #FFF;
+    color: #333;
     background-color: transparent;
-    border-color: #fff;
+    border-color: #333;
   }
 
   .btn-outline-inverse:hover {
@@ -101,4 +247,56 @@
     font-size: 60%;
     vertical-align: .2em;
   }
+
+  /* Inline code within headings retain the heading's background-color */
+  h2 code,
+  h3 code,
+  h4 code {
+    background-color: inherit;
+  }
+
+  /* Back to top (hidden on mobile) */
+  .back-to-top {
+    display: none;
+    padding: 4px 10px;
+    margin-top: 10px;
+    margin-left: 10px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #999;
+  }
+  .back-to-top:hover {
+    color: #428BCA;
+    text-decoration: none;
+  }
+
+  @media (min-width: 768px) {
+    .back-to-top {
+      display: block;
+    }
+  }
+
+  .s2-docs-nav {
+      margin-bottom: 0;
+  }
+
+  .s2-docs-nav .navbar-brand {
+    font-weight: 500;
+  }
+
+  h1[id] {
+    padding-top: 20px;
+    margin-top: 0;
+  }
+
+  .alert {
+    background-color: transparent;
+    border-width: 2px;
+  }
+
+  @media (min-width: 768px) {
+    .alert {
+      padding: 30px;
+    }
+  }
 </style>

docs/_includes/nav/options.html

@@ -0,0 +1,54 @@
+<nav class="s2-docs-sidebar hidden-print hidden-xs hidden-sm">
+  <ul class="nav s2-docs-sidenav">
+    <li>
+      <a href="#core-options">Core Options</a>
+      <ul class="nav">
+        <li><a href="#data-attributes">Declaring configuration in the data-* attributes</a></li>
+        <li><a href="#amd">AMD compatibility</a></li>
+        <li><a href="#core-options-display">Display</a></li>
+        <li><a href="#core-options-results">Results</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#dropdown">Dropdown</a>
+      <ul class="nav">
+        <li><a href="#dropdownParent">Attached to body</a></li>
+        <li><a href="#dropdown-attachContainer">Attached below the container</a></li>
+        <li><a href="#dropdown-search">Search</a></li>
+        <li><a href="#dropdown-select-on-close">Select the highlighted option on close</a></li>
+        <li><a href="#closeOnSelect">Close the dropdown when a result is selected</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#events">Events</a>
+      <ul class="nav">
+        <li><a href="#events-public">Public events</a></li>
+        <li><a href="#events-internal">Internal events</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#adapters">Adapters</a>
+      <ul class="nav">
+        <li><a href="#adapters-all">All adapters</a></li>
+        <li><a href="#selectionAdapter">Container (selection)</a></li>
+        <li><a href="#dataAdapter">Data set</a></li>
+        <li><a href="#dropdownAdapter">Dropdown</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#setting-default-options">Setting default options</a>
+    </li>
+    <li>
+      <a href="#backwards-compatibility">Backwards compatibility</a>
+      <ul class="nav">
+        <li><a href="#compat-matcher">Simplified function for matching data objects</a></li>
+        <li><a href="#initSelection">Old initial selections with initSelection</a></li>
+        <li><a href="#query">Querying old data with <code>query</code></a></li>
+        <li><a href="#input-fallback">Compatibility with <code>&lt;input type="text" /&gt;</code></a></li>
+      </ul>
+    </li>
+  </ul>
+  <a class="back-to-top" href="#top">
+    Back to top
+  </a>
+</nav>

docs/_includes/navigation.html

@@ -1,4 +1,4 @@
-<header class="navbar navbar-static-top" id="top" role="banner">
+<header class="s2-docs-nav navbar navbar-static-top" id="top" role="banner">
   <div class="container">
     <div class="navbar-header">
       <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">

docs/_layouts/default.html

@@ -10,20 +10,52 @@
 
         {% include footer.html %}
         <script>
-          (function () {
-            'use strict';
-            addAnchors('.container h1, .container h2, .container h3, .container h4, .container h5');
-          })();
+            (function ($) {
+                'use strict';
+                $(function () {
+                    var $window = $(window);
+                    var $body = $(document.body);
+                    var $sidebar = $('.s2-docs-sidebar');
+
+                    $body.scrollspy({
+                        target: '.s2-docs-sidebar',
+                        offset: 40
+                    });
+
+                    $window.on('load', function () {
+                        $body.scrollspy('refresh');
+                    });
+
+                    $sidebar.affix({
+                        offset: {
+                            top: function () {
+                                var offsetTop = $sidebar.offset().top;
+                                var navOuterHeight = $('.s2-docs-nav').height();
+
+                                return (this.top = offsetTop - navOuterHeight);
+                            },
+                            bottom: function () {
+                                return (this.bottom = $('.s2-docs-footer').outerHeight(true));
+                            }
+                        }
+                    });
+                });
+            })(jQuery);
+
+            (function () {
+                'use strict';
+                addAnchors('.s2-docs-container h1, .s2-docs-container h2, .s2-docs-container h3, .s2-docs-container h4, .s2-docs-container h5');
+            })();
         </script>
 
         <script type="text/javascript">
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-        ga('create', 'UA-57144786-2', 'auto');
-        ga('send', 'pageview');
+            ga('create', 'UA-57144786-2', 'auto');
+            ga('send', 'pageview');
         </script>
     </body>
 </html>

docs/vendor/css/prettify.css

@@ -8,14 +8,15 @@
 .pln { color: #48484c; }
 
 .prettyprint {
-  padding: 8px;
+  padding: 9px 14px;
+  margin-bottom: 14px;
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
 }
 .prettyprint.linenums {
-  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+  -webkit-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
+     -moz-box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
+          box-shadow: inset 48px 0 0 #fbfbfc, inset 49px 0 0 #ececf0;
 }
 
 /* Specify class=linenums on a pre to get line numbering */
@@ -23,7 +24,7 @@ ol.linenums {
   margin: 0;
 }
 ol.linenums li {
-  padding-left: 12px;
+  padding-left: 4px;
   color: #bebec5;
   line-height: 18px;
 }