{%- if page.toc | length >= 1 %}
<div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Contents">
            <span class="fa fa-angle-down"></span>
        </button>
    </div>

    <div id="toc-collapse" class="navbar-collapse collapse card bg-secondary toc-scroll" style="background-color: #f6f6f6 !important;">
        <ul class="nav flex-column bs-sidenav">
            <p style="margin-top:5px; color:#777777;" class="text-center">Contents</p>
        {%- for toc_item in page.toc %}
            <li class="nav-item main"><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
            {%- for toc_item in toc_item.children %}
                <li class="nav-item" style="text-indent: 5px;">
                    <a href="{{ toc_item.url }}" class="nav-link{% if toc_item.active %} active{% endif %}">• {{ toc_item.title }}</a>
                </li>
                {%- for toc_item in toc_item.children %}
                <li class="nav-item" style="text-indent: 25px;">
                    <a href="{{ toc_item.url }}" class="nav-link{% if toc_item.active %} active{% endif %}">&rarr; {{ toc_item.title }}</a>
                </li>
            {%- endfor %}
            {%- endfor %}
        {%- endfor %}
        </ul>
    </div>
</div>
{%- else %}
{%- endif %}
