{% 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">🚀</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>