{% assign docs = site | sort: “order” %} {% assign docs_grouped = docs | group_by: “category” %}

{% if page.url == '/' || page.url == '' || %}

{% assign current = 'active' %}

{% else %}

{% assign current = null %}

{% endif %}

{% assign current_category = null %} {% for cat in docs_grouped %}

{% for doc in cat.items %}
  {% if doc.url == page.url %}
    {% assign current_category = doc.category %}
  {% endif %}
{% endfor %}

{% endfor %}

<nav class=“ad-site-nav”>

<a href="/" class="ad-btn-nav-home {{ current }}">
  <span class="symbol">&#128640;</span> Getting started
</a>
{% for cat in docs_grouped %}
  {% if current_category == cat.name %}
    <button class="ad-collapsible active">{{ cat.name }}</button>
  {% else %}
    <button class="ad-collapsible">{{ cat.name }}</button>
  {% endif %}
  <ul class="ad-collapsible-content">
  {% for doc in cat.items %}
    {% if doc.url == page.url %}
        {% assign current = ' class="active"' %}
    {% else %}
        {% assign current = null %}
    {% endif %}
    <li{{ current }}>
      <a href="{{ site.baseurl }}{{ doc.url }}" class='ad-nav-link'>
        <span class='title'>{{ doc.title }}</span>
        {% if doc.status or doc.prio or doc.version or doc.vtags or doc.vtag %}
          <div class='doc-meta-nav'>
            {% if doc.status %}
              <span class='tag tag--{{ doc.status }} feature-meta__status--{{ doc.status }}'>{{ doc.status }}</span>
            {% endif %}
            {% if doc.prio %}
              <span class='tag tag--{{ doc.prio }} feature-meta__status--{{ doc.prio }}'>{{ doc.prio }}</span>
            {% endif %}
            {% if doc.vtag %}
              <span class='tag tag--{{ doc.vtag | replace: " ", "-" }} feature-meta__status--{{ doc.vtag | replace: " ", "-" }}'>{{ doc.vtag }}</span>
            {% endif %}
            {% if doc.vtags %}
              {% for vtag in doc.vtags %}
                <span class='tag tag--{{ vtag | replace: " ", "-" }} feature-meta__status--{{ vtag | replace: " ", "-" }}'>{{ vtag }}</span>
              {% endfor %}
            {% endif %}
            <span class='version'>{{ doc.version }}</span>
          </div>
        {% endif %}
      </a>
    </li>
  {% endfor %}
  </ul>
{% endfor %}

</nav>

<script> var coll = document.getElementsByClassName(“ad-collapsible”); var i;

for (i = 0; i < coll.length; i++) {

coll[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var content = this.nextElementSibling;
  if (content.style.maxHeight){
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
});
// Expand already active category:
if (coll[i].classList.contains('active')) {
  var content = coll[i].nextElementSibling;
  if (content.style.maxHeight){
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
}

} </script>