<div class="app-sidebar-menu overflow-hidden flex-column-fluid">
  <div id="kt_app_sidebar_menu_wrapper" class="app-sidebar-wrapper">
    <div
        id="kt_app_sidebar_menu_scroll"
        class="scroll-y my-5 mx-3"
        data-kt-scroll="true"
        data-kt-scroll-activate="true"
        data-kt-scroll-height="auto"
        data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer"
        data-kt-scroll-wrappers="#kt_app_sidebar_menu"
        data-kt-scroll-offset="5px"
        data-kt-scroll-save-state="true">
      <div
          class="menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6"
          id="#kt_app_sidebar_menu"
          data-kt-menu="true"
          data-kt-menu-expand="false">

        {% for item in sidebar.menu %}
          {% if item.permissions %}
            {% if item.is_label %}
              <div class="menu-item{% if not forloop.first %} pt-5{% endif %}">
                <div class="menu-content">
                  <span class="menu-heading fw-bold text-uppercase fs-7">{{ item.title }}</span>
                </div>
              </div>
            {% else %}
              {% if item.has_children %}
                <div data-kt-menu-trigger="click"
                     class="menu-item menu-accordion{% if item.is_active %} here show{% endif %}">
                  <span class="menu-link">
                    <span class="menu-icon">
                     {{ item.icon|safe }}
                    </span>
                    <span class="menu-title">{{ item.title }}</span>
                    <span class="menu-arrow"></span>
                  </span>
                  <div class="menu-sub menu-sub-accordion">
                    {% for child in item.children %}
                      <div class="menu-item">
                        <a class="menu-link{% if child.is_active %} active{% endif %}"
                            {% if child.comment %}
                           title="{{ child.comment }}"
                           data-bs-toggle="tooltip"
                           data-bs-trigger="hover"
                           data-bs-dismiss="click"
                           data-bs-placement="right"
                            {% endif %}
                           href="{{ child.url }}">
                          <span class="menu-bullet">
                            <span class="bullet bullet-dot"></span>
                          </span>
                          <span class="menu-title">{{ child.title }}</span>
                        </a>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              {% else %}
                <div class="menu-item">
                  <a class="menu-link{% if item.is_active %} active{% endif %}"
                      {% if item.comment %}
                     title="{{ item.comment }}"
                     data-bs-toggle="tooltip"
                     data-bs-trigger="hover"
                     data-bs-dismiss="click"
                     data-bs-placement="right"
                      {% endif %}
                     href="{{ item.url }}">
                    <span class="menu-icon">
                     {{ item.icon|safe }}
                    </span>
                    <span class="menu-title">{{ item.title }}</span>
                  </a>
                </div>

              {% endif %}
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
