<!– Graciously derived from www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu –> <div id=“sidebar-container” class=“sidebar-expanded d-none d-md-block”>

<ul class="list-group">

    {%- for category in site.nav.categories -%}
        <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
            <small>{{ category.name | upcase }}</small>
        </li>
        {%- for group in category.groups -%}
            {%- assign pages = site.pages | where_exp: "page", "page.group == group.name" | sort: "nav_order" -%}
            {%- capture submenuId -%}submenu-{{ category.name | replace: " ", "_" }}-{{ group.name | replace: " ", "_" }}-{{ forloop.index }}{%- endcapture -%}
            {%- assign activeCount = pages | where_exp: "groupPage", "groupPage.url == page.url" | size -%}

            <!-- TODO: Catpure groupActive and linkActive to apply classes and data props -->
            {%- if pages.size == 1 -%}
                <a href="{{ pages | map: 'url' | first | relative_url }}"
                class="bg-dark list-group-item list-group-item-action {% if activeCount > 0 %} active{%- endif -%}">
                    <div class="d-flex w-100 justify-content-start align-items-center">
                        <span class="{{ group.fa_class }} fa-fw mr-3"></span>
                        <span class="menu-collapsed">{{ group.name }}</span>
                    </div>
                </a>
            {%- else -%}
                <a href="#{{ submenuId }}"
                    data-toggle="collapse"
                    aria-expanded="{%- if activeCount > 0 -%}true{%- else -%}false{%- endif -%}"
                    class="bg-dark list-group-item list-group-item-action grou-nav flex-column align-items-start {% if activeCount > 0 %} active{%- endif -%}">
                    <div class="d-flex w-100 justify-content-start align-items-center">
                        <span class="{{ group.fa_class }} fa-fw mr-3"></span>
                        <span class="menu-collapsed">{{ group.name }}</span>
                        <span class="submenu-icon ml-auto submenu-expand fa fa-caret-down"></span>
                        <span class="submenu-icon ml-auto submenu-collapse fa fa-caret-up"></span>
                    </div>
                </a>
                <div id='{{ submenuId }}' class="{%- if activeCount == 0 -%}collapse{%- endif %} sidebar-submenu">
                    {%- for navPage in pages -%}
                        <a href="{{ navPage.url | relative_url }}"
                            class="list-group-item list-group-item-action bg-dark text-white {% if page.url == navPage.url %} active{%- endif -%}">
                            <span class="menu-collapsed">{{ navPage.title }}</span>
                        </a>
                    {%- endfor -%}
                </div>
            {%- endif -%}
        {%- endfor -%}
    {%- endfor -%}

        <a href="#top" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
            <div class="d-flex w-100 justify-content-start align-items-center">
                <span id="collapse-icon" class="fa fa-angle-left fa-2x mr-3"></span>
                <span id="collapse-text" class="menu-collapsed">Collapse</span>
            </div>
        </a>
</ul>

</div>