<aside class=“docs__sidebar”>

<!-- Search -->
<div class="docs__search">
    <input id="search-input" class="docs__search-input" type="search" placeholder="Search docs…" autocomplete="off">
    <ul class="docs__search-results" id="results-container"></ul>
</div>
<!-- Nav -->
{% assign docs_by_category = site.docs | group_by: 'category' %}
<ul class="docs__nav">
    {% for cat in site.data.categories.order %}
        {% assign currentCat = docs_by_category | where: 'name', cat | first %}
        {% assign currPath = page.path | split: "/" %}
        {% assign catSlug =  currentCat.name | slugify %}
        {% if page.url == '/' and forloop.first == true %}
            <li class="docs__nav-item--active">
        {% elsif currPath[1] == catSlug %}
            <li class="docs__nav-item--active">
        {% else %}
            <li class="docs__nav-item">
        {% endif %}
                <a class="docs__nav-toggle">{{ currentCat.name}}</a>
                <ul class="docs__nav-dropdown">
                    {% assign docs = site.docs | where: 'category', currentCat.name | sort: 'order' %}
                    {% assign sortedDocs = site.docs | sort: 'order' %}
                    {% for entry in docs %}
                        {% if page.url == entry.url or page.url == "/" and sortedDocs[0].title == entry.title %}
                            <li class="docs__nav-dropdown-item docs__nav-dropdown-item--active">
                                <a href="{{ entry.url }}" class="docs__nav-dropdown-link">{{ entry.title }}</a>
                            </li>
                        {% else %}
                            <li class="docs__nav-dropdown-item">
                                <a href="{{ entry.url }}" class="docs__nav-dropdown-link">{{ entry.title }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </li>
    {% endfor %}
</ul>

</aside>