website/_includes/nav_docs.html

<nav class='toc' id="doc_nav" role="navigation" aria-label="Documentation navigation"></nav>
<script>
  var docnavData = [
    {% for group in site.data.nav_docs %}
    {
      group     : "{{ group.title }}",
      items     : [
        {% for item in group.items %}
          {% for docitem in site.docs %}
            {% if docitem.pageid == item.id %}
              {% assign doc = docitem %}
            {% endif %}
          {% endfor %}
        {
          key : "{{ site.baseurl }}{{ doc.url }}",
          title : "{{ doc.title }}",
          url : "{{ site.baseurl }}{{ doc.url }}",
        }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ],
    },
    {% endfor %}
  ];
</script>
<script type="text/javascript">
window.addEventListener('load', function() {
  var DocNav = React.createClass({displayName: "DocNav",
    getInitialState: function() {
      return {
        toggleActive: false,
      };
    },
    getDefaultProps: function() {
      return {
        currentDoc: "{{ page.title }}",
        currentGroup: "{{ page.section }}",
        data: docnavData,
      }
    },
    handleSlide: function(id) {
      this.setState({
        toggleActive: !this.state.toggleActive,
      });
    },
    render: function() {
      var classes = React.addons.classSet({
        'navToggle': true,
        'navToggleActive': this.state.toggleActive,
      });
      var navClasses = React.addons.classSet({
        'toggleNav': true,
        'toggleNavActive': this.state.toggleActive,
      });
      return (
        React.createElement("div", {className: navClasses},
          React.createElement("section", null,
            this.props.data.map(this.renderNavGroups)
          ),
          React.createElement("div", {className: classes, onClick: this.handleSlide}, React.createElement("i", {className: "fa fa-chevron-circle-down"}))
        )
      );
    },
    renderNavGroups: function(child, index) {
      var classes = React.addons.classSet({
        'navGroup': true,
        'navGroupActive': this.props.currentGroup === child.group,
      });
      return (
        React.createElement("div", {className: classes, key: index},
          React.createElement("h3", null, child.group),
          React.createElement("ul", null,
            child.items.map(this.renderNavItems)
          )
        )
      );
    },
    renderNavItems: function(child, index) {
      var itemClasses = React.addons.classSet({
        'navListItem': true,
        'navListItemActive': this.props.currentDoc === child.title,
      });
      var classes = React.addons.classSet({
        'navItem': true,
        'navItemActive': this.props.currentDoc === child.title,
      });
      return (
        React.createElement("li", {className: itemClasses, key: index}, React.createElement("a", {className: classes, href: child.url},  child.title))
      );
    },
  });

  function docNavRender(docnavData) {
    React.render(
      React.createElement(DocNav, {data: docnavData}),
      document.getElementById('doc_nav')
    );
  }
  docNavRender(docnavData);
});
</script>