<div class="col-2 m-0 p-0">
    <div class="sticky-top">
        {% for nav_item in nav %}

        {% if nav_item.title == "Lectures" %}
        {% set icon = "bi-journals" %}
        {% elif nav_item.title == "Lab Activities" %}
        {% set icon = "bi-pen" %}
        {% elif nav_item.title == "Your Assessment" %}
        {% set icon = "bi-journal-code" %}
        {% elif nav_item.title == "Getting Started" %}
        {% set icon = "bi-flag" %}
        {% elif nav_item.title == "Support" %}
        {% set icon = "bi-info-circle" %}
        {% elif nav_item.title == "Module Essentials" %}
        {% set icon = "bi-journal-bookmark" %}
        {% elif nav_item.title == "Linux" %}
        {% set icon = "bi-ubuntu" %}
        {% elif nav_item.title == "macOS" %}
        {% set icon = "bi-apple" %}
        {% elif nav_item.title == "Windows" %}
        {% set icon = "bi-microsoft" %}
        {% elif nav_item.title == "Windows Subsystem for Linux" %}
        {% set icon = "bi-terminal" %}
        {% else %}
        {% set icon = "bi-link-45deg" %}
        {% endif %}

        {% if nav_item.children %}
        <div class="{% if loop.last %}mb-0{% else %}mb-3{% endif %}">
            <button class="btn btn-link"
                    data-bs-toggle="collapse"
                    data-bs-target="#{{ nav_item.title.replace(' ', '-')|lower }}"
                    aria-expanded="false"
                    aria-controls="{{ nav_item.title.replace(' ', '-')|lower }}">
                <i class="bi {{ icon }} me-2"></i>
                <span class="btn-link-text">{{ nav_item.title }}</span>
            </button>
            <div class="collapse no-transition" id="{{ nav_item.title.replace(' ', '-')|lower }}">
                <ul class="sidebar-expanded">
                    {% for nav_item_secondary in nav_item.children %}
                    <li class="">
                        {% if nav_item_secondary.children %}
                        <ul class="bg-body-tertiary rounded-2 p-2 m-0 {% if not(loop.last) %}mb-2{% endif %}"
                            id="{{ nav_item_secondary.title.replace(' ', '-')|lower }}">
                            <li class="d-flex flex-row tertiary-item"
                                data-bs-toggle="collapse"
                                data-bs-target="#{{ nav_item.title.replace(' ', '-')|lower }}-{{ nav_item_secondary.title.replace(' ', '-')|lower }}"
                                aria-expanded="false"
                                aria-controls="{{ nav_item.title.replace(' ', '-')|lower }}-{{ nav_item_secondary.title.replace(' ', '-')|lower }}">
                                <span class="btn-link-text fw-bold">{{ nav_item_secondary.title }}</span>
                            </li>
                            <div class="collapse no-transition"
                                 id="{{ nav_item.title.replace(' ', '-')|lower }}-{{ nav_item_secondary.title.replace(' ', '-')|lower }}">
                                <ul class="ps-0">
                                    {% for nav_item_tertiary in nav_item_secondary.children %}
                                    <li class="ms-4">
                                        <a href="{{ nav_item_tertiary.url | url }}">{{ nav_item_tertiary.title }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </ul>
                        {% else %}
                        <a href="{{ nav_item_secondary.url | url }}">{{ nav_item_secondary.title }}</a>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% else %}
        <div class="{% if loop.last %}mb-0{% else %}mb-3{% endif %}">
            <button class="btn btn-link-single" onclick="window.location='{{ nav_item.url | url }}'">
                <i class="bi {{ icon }} me-2"></i>
                <span class="btn-link-text">{{ nav_item.title }}</span>
            </button>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>

