{% assign current_package = site.sections | where: "name", page.package | first %}

<div class="doc-nav {% unless current_package %}none{% endunless %}">
    <div class="wrapper wrapper-large" style="padding: 0 10px;">
        <ul class="doc-nav-sections">
            {% assign sorted_sections = site.sections | sort: "order_number" %}
            {% for section in sorted_sections %}
                {% assign package = site.collections | where: "title", section.name | first %}
                {% if package.docs %}
                    {% assign first_in_package = package.docs | sort: "order_number" | first %}
                    <li {%if page.url contains section.url%}id="make-visible"{%endif%}class="doc-nav-section">
                        <a href="{{first_in_package.url}}" class="doc-nav-section-link {% if page.url contains section.url %}current{% endif %}">
                            <div class="package-icon">
                                {% include components/package-nav-icon.html icon=section.icon %}
                            </div>
                            <strong>{{section.name}}</strong>
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
    {% unless current_package %}
        <div class="doc-nav-sections-empty-fix"></div>
    {% endunless %}
</div>

<script>
(function () {
    var elmnt = document.getElementById("make-visible");
    if (elmnt) {
        elmnt.scrollIntoView(true);
        if (screen.width < 800) { 
            elmnt.scrollIntoView({inline: "center"});
        }
    }
})();
</script>