site/_includes/doc_sidebar.html

{% assign flagon = site.docs | where:"component", "flagon" | sort: "priority" %}
{% assign useralejs = site.docs | where:"component", "useralejs" | sort: "priority" %}
{% assign distill = site.docs | where:"component", "distill" | sort: "priority" %}

<!-- <div class="ui inverted list">
  <a class="item" href="{{ '/docs' | prepend: site.baseurl }}">About the Docs</a>
</div> -->
<div id="docs-nav" class="ui inverted accordion">
  {% if page.component == "flagon" %}
    <div class="active title">
  {% else %}
    <div class="title">
  {% endif %}
    <i class="dropdown icon"></i>
    Apache Flagon
  </div>
  {% if page.component == "flagon" %}
    <div class="active content">
  {% else %}
    <div class="content">
  {% endif %}
    <div class="ui inverted bulleted list docs-list">
      {% for doc in flagon %}
        <a class="item" href="{{ doc.url }}">{{ doc.title }}</a>
      {% endfor %}
    </div>
  </div>

  {% if page.component == 'useralejs' %}
    <div class="active title">
  {% else %}
    <div class="title">
  {% endif %}
    <i class="dropdown icon"></i>
    UserALE.js
  </div>
  {% if page.component == 'useralejs' %}
    <div class="active content">
  {% else %}
    <div class="content">
  {% endif %}
    <div class="ui inverted bulleted list docs-list">
      {% for doc in useralejs %}
        <a class="item" href="{{ doc.url }}">{{ doc.title }}</a>
      {% endfor %}
    </div>
  </div>

  {% if page.component == 'distill' %}
    <div class="active title">
  {% else %}
    <div class="title">
  {% endif %}
    <i class="dropdown icon"></i>
    Distill
  </div>
  {% if page.component == 'distill' %}
    <div class="active content">
  {% else %}
    <div class="content">
  {% endif %}
    <div class="ui inverted bulleted list docs-list">
      {% for doc in distill %}
        <a class="item" href="{{ doc.url }}">{{ doc.title }}</a>
      {% endfor %}
    </div>
  </div>

</div>