{% if item.type == 'submenu' %}
  <li class="nav-item{% if item.active|default(false) is same as(true) %} active{% endif %}"
    title="{{ item.label }}"
  >
    <span class="nav-link{% if item.active|default(false) is not same as(true) %} collapsed{% endif %}"
      data-bs-toggle="collapse"
      data-bs-target="#submenu-collapse-{{ key }}"
    >
      <i class="{% if item.icon is defined %}{{ item.icon }}{% else %}fa fa-circle{% endif %}"></i> {{ item.label }}
    </span>
    <div id="submenu-collapse-{{ key }}"
      class="collapse{% if item.active|default(false) is same as(true) %} show{% endif %}"
      data-bs-parent="#sidebar-accordion"
    >
      <div class="bg-white collapse-inner rounded">
        {% for subitem in item.children %}
          <a class="collapse-item{% if subitem.active|default(false) is same as(true) %} active{% endif %}"
            href="{{ subitem.link|default('') }}"
            title="{{ subitem.label }}"
          >
            <i class="{% if subitem.icon is defined %}{{ subitem.icon }}{% else %}fa fa-circle{% endif %}"></i> {{ subitem.label }}
          </a>
        {% endfor %}
      </div>
    </div>
  </li>
{% else %}
  {% set item_css_classes = 'nav-item' %}
  {% if item.active is defined and item.active is not empty %}
    {% set item_css_classes = item_css_classes ~ ' active' %}
  {% endif %}
  <li class="{{ item_css_classes }}">
    <a class="nav-link {{ item.classes }}"
      href="{{ item.link|default('') }}"
      title="{{ item.label }}"
      {% if item.extra.prevent_content is defined and item.extra.prevent_content is not empty %}
        data-prevent-content="{{ item.extra.prevent_content }}"
      {% endif %}
    >
      <i class="{% if item.icon is defined %}{{ item.icon }}{% else %}fa fa-circle{% endif %}"></i>
      <span>{{ item.label }}</span>
    </a>
  </li>
{% endif %}