{% load onepage_tags %}
{% menu_items as menus %}

<nav class="sidebar sidebar-bunker active">
    <div class="sidebar-body">
        <nav class="sidebar-nav">
            <div class="dismiss"><i class="fas fa-arrow-left"></i></div>
            <div class="logo">
                <h3><a href="index.html">Bootstrap 4 Template with Sidebar Menu</a></h3>
            </div>
            <ul class="metismenu">
                {% for key, menu in menus.items %}
                <li>
                    <a href="#{{ menu.id }}" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" role="button" aria-controls="otherSections">
                        <i class="{{ menu.icon }}"></i>{{ menu.title }}
                    </a>
                    <ul class="collapse list-unstyled" id="{{ menu.id }}">
                        {% for sub_item in menu.submenu %}
                        <li id="{{ sub_item.id }}" class="ajax-four-act-handler"
                            data-props="{{ sub_item.id }}" data-r-kwargs="{{ sub_item.data_r_kwargs }}"
                            data-keys="{{ sub_item.data_keys }}"
                        >
                            <a class="scroll-link" href="#section-3">{{ sub_item.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </li>
                {% endfor %}
            </ul>
            <div class="dark-light-buttons">
                <a class="btn btn-primary btn-customized-4 btn-customized-dark" href="#" role="button">Dark</a>
                <a class="btn btn-primary btn-customized-4 btn-customized-light" href="#" role="button">Light</a>
            </div>
        </nav>
    </div>
</nav>
