<div class="leftside-menu leftside-menu-detached">
    <!-- This simply gives padding and add color swirl at the top-->
    <div class="leftbar-user"></div>
    <!--- Sidemenu -->
    <ul class="side-nav">
        <li id="home" class="side-nav-item">
            <a href="{% url 'home' %}" class="side-nav-link">
                <i class="uil-home-alt"></i>
                <span>Home</span>
            </a>
        </li>
        <li id="profile" class="side-nav-item">
            <a href="{% url 'profile' %}" class="side-nav-link">
                <i class="uil-user-circle"></i>
                <span>Profile</span>
            </a>
        </li>
        <!--
        <li id="toolkit" class="side-nav-item">
            <a href="#" class="side-nav-link">
                <i class="uil-calculator-alt"></i>
                <span>Toolkit</span>
            </a>
        </li>
-->
        <li id="apps" class="side-nav-item">
            <a href="{% url 'apps' %}" class="side-nav-link">
                <i class="uil-apps"></i>
                <span>Apps</span>
            </a>
        </li>
        <li id="data_explorer" class="side-nav-item">
            <a href="{% url 'data_explorer:home' %}" class="side-nav-link">
                <i class="uil-graph-bar"></i>
                <span>Data</span>
            </a>
        </li>
        <li id="workflows" class="side-nav-item">
            <a href="{% url 'workflows' %}" class="side-nav-link">
                <i class="uil-sitemap"></i>
                <span>Workflows</span>
            </a>
        </li>
        <!--
        <li id="learn" class="side-nav-item">
            <a href="#" class="side-nav-link">
                <i class="uil-lightbulb-alt"></i>
                <span>Learn</span>
            </a>
        </li>
-->
        <!--
        <li id="downloads" class="side-nav-item">
            <a href="#" class="side-nav-link">
                <i class="uil-folder-download"></i>
                <span>Downloads</span>
            </a>
        </li>
-->
        <!--
        <li id="contribute" class="side-nav-item">
            <a href="#" class="side-nav-link">
                <i class="uil-folder-upload"></i>
                <span>Contribute</span>
            </a>
        </li>
-->
        <!--
        <li id="settings" class="side-nav-item">
            <a href="#" class="side-nav-link">
                <i class="uil-cog"></i>
                <span>Settings</span>
            </a>
        </li>
-->
        <li id="extras" class="side-nav-item">
            <a href="{% url 'extras' %}" class="side-nav-link">
                <i class="uil-ellipsis-h"></i>
                <span>Extras</span>
            </a>
        </li>
    </ul>
    <!-- end Sidemenu-->
    <!-- Help Box -->
    <div class="help-box help-box-light text-center">
        <a href="#" class="float-end close-btn text-body">
            <i class="mdi"></i>
        </a>
        <h5 class="mt-3">Download Simmate</h5>
        <p class="mb-3">You can install Simmate to host your own server and access advanced features</p>
        <a href="https://jacksund.github.io/simmate/home/"
           class="btn btn-outline-primary btn-sm uil-github-alt">learn more</a>
    </div>
    <!-- end Help Box -->
    <div class="clearfix"></div>
    <!-- Sidebar -left -->
</div>
