<div class="col-auto col-lg-2 p-2 list-group list-group-flush text-truncate vh-100">

    <a id="home" class="list-group-item list-group-item-action text-truncate text-primary" href="{% url 'home' %}">
        <i class="bi bi-house fs-4"></i>
        <span class="d-none d-lg-inline">Home</span>
    </a>

    <a id="profile" class="list-group-item list-group-item-action text-truncate text-primary"
        href="{% url 'profile' %}">
        <i class="bi bi-person-circle fs-4"></i>
        <span class="d-none d-lg-inline">Profile</span>
    </a>

    <a id="toolbox" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-calculator fs-4"></i>
        <span class="d-none d-lg-inline">Toolkit</span>
    </a>

    <a id="workflows" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-diagram-3 fs-4"></i>
        <span class="d-none d-lg-inline">Workflows</span>
    </a>

    <a id="learn" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-lightbulb fs-4"></i>
        <span class="d-none d-lg-inline">Learn</span>
    </a>

    <a id="downloads" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-box-arrow-down fs-4"></i>
        <span class="d-none d-lg-inline">Downloads</span>
    </a>

    <a id="contribute" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-box-arrow-in-up fs-4"></i>
        <span class="d-none d-lg-inline">Contribute</span>
    </a>

    <a id="settings" class="list-group-item text-truncate disabled" href="#">
        <i class="bi bi-gear fs-4"></i>
        <span class="d-none d-lg-inline">Settings</span>
    </a>

    <a id="extras" class="list-group-item list-group-item-action text-truncate text-primary" href="{% url 'extras' %}">
        <i class="bi bi-three-dots fs-4"></i>
        <span class="d-none d-lg-inline">Extras</span>
    </a>

</div>

<!-- This javascript helps highlight the correct tab and adds the "active" class to it -->
{% if active_tab_id %}
<script>
    var tab = document.getElementById("{{ active_tab_id }}");
    tab.classList.add("active");
    tab.classList.remove("text-primary");
    tab.classList.add("text-light");
</script>
{% endif %}
