sidebar.html

<div class="col-sidebar">
  <script src="{{ 'js/initSidebar.js' | relative_url }}"></script>
  <ul id="sidebar" class="nav {% if page.name == 'index.md' %}nav--home{% endif %}{% if page.url == '/search.html'%}nav--search{% endif %}" style="display: none">
    <div class="sidenav-arrow"><div class="arrow-down"></div></div>
    <div class="collapsed-header">
      Docs Menu
      {% comment %}
        On pages that match a sidebar entry, the JavaScript below
        injects the following HTML.
        <div class="collapsed-header__pre">
          Breadcrumb level 1
          <div class=\"arrow-down arrow-down--pre\"></div>
          Breadcrumb level 2
        </div>
        <div>Page title</div>
      {% endcomment %}
    </div>
    <li class="search-wrap">
      <div class="search">
        <span class="fa fa-search"></span>
        <form class="search-form" method="GET" action="{{ 'search.html' | relative_url }}">
          <input type="text" id="search-input" name="q" placeholder="Search docs">
          <span class="clear-search"></span>
        </form>
      </div>
    </li>
    <script>
      (function () {
        var baseUrl = "{{ site.baseurl }}";

        var isVersionDirectory = function (d) {
          // Version directories either are one of the named version
          // aliases specifed in _config.yml or have the form "vX.X",
          // like "v1.0" or "v1.10".
          return {{ site.versions | jsonify }}[d] || /^v\d+.\d+$/.test(d);
        };

        // We derive the version from the URL rather than hardcoding
        // `page.version` so that the source of pages for "named"
        // versions, like stable and edge, can be identical to the
        // source for the underlying version, like v1.0 or v1.1.
        // Otherwise, the sidebar for a `stable` page would
        // inappropriately link to the underlying `v1.0` page instead
        // of the `stable` alias.
        var pageVersion = (function () {
          var pathComponents = location.pathname
            .replace(baseUrl, '')
            .replace(/^\//, '')
            .split('/');
          // The version is the first directory component in the URL,
          // if it exists.
          if (pathComponents.length > 1 && isVersionDirectory(pathComponents[0])) {
            return pathComponents[0];
          }
          // Non-versioned pages link to stable docs.
          return "stable";
        })();

        // Given a sidebar hierarchy (see _data/sidebar-data-v1.0.json
        // for an example), returns a jQuery <ul> element with the
        // following structure:
        //
        // <ul>
        //   <li class="tier-1">
        //    <a href="{{ item.url }}">{{ item.title }}</a>
        //     <ul>
        //       {% for item in item.items %}
        //         <li class="tier-2">...</li>
        //       {% endfor %}
        //     </ul>
        //   </li>
        // </ul>
        //
        // Additionally injects breadcrumbs for the active sidebar
        // entry, if any, into the `.collapsed-header` element above.
        function renderItems(items, paths) {
          if (!items || items.length == 0)
              return $();

          var lis = items.map(function (item) {
            var urls = (item.urls || []).map(function (url) {
              var url = url.replace("${VERSION}", pageVersion);
              // This condition makes it possible to use external
              // urls in the sidebar.
              if (!/^https?:/.test(url)) {
                url = baseUrl + url;
              }
              return url;
            });

            // this ensures page will be highlighted in sidebar even if URL is accessed without `.html` appended
            var activePathname = location.pathname.slice(-5) === '.html' ? location.pathname : location.pathname + '.html';

            var active = (urls.indexOf(activePathname) !== -1);
            if (active) {
              // This mutation inside an otherwise pure function is
              // unfortunate, but doing it here avoids a separate
              // traversal of the sidebar data.
              var breadcrumbs = $("<div>")
                .addClass("collapsed-header__pre")
                .html(paths.join("<div class=\"arrow-down arrow-down--pre\"></div>\n"));

              var title = $("<div>").html(item.title);
              $(".collapsed-header").empty().append(breadcrumbs, title);
            }

            var subitems = renderItems(item.items, paths.concat(item.title));
            var a = $("<a>")
              .attr("href", urls[0] || "#")
              .html(item.title);

            if (subitems.length > 0) {
              if (item.is_top_level) {
                a.append(" ").append($("<div>").addClass("nav-expand"));
              } else {
                a.append(" ").append($("<div>").addClass("arrow-down"));
              }
            }

            return $("<li>")
              .addClass("tier-" + (paths.length + 1))
              .toggleClass("active", active)
              .append(a)
              .append(subitems);
          });

          return $("<ul>").append(lis);
        }

        document.write(renderItems({% include {{ page.sidebar_data }} %}, []).html());
      })();
    </script>
  </ul>
  <script src="{{ 'js/searchInputRendering.js' | relative_url }}"></script>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above.-->
<script>$("#sidebar").find("li.active").parents('li').toggleClass("active");</script>