homepage.veen.world/app/templates/moduls/navigation.html.j2

{% macro render_icon_and_name(item) %}
    <i class="{{ item.icon.class if item.icon is defined and item.icon.class is defined else 'fa-solid fa-link' }}"></i>
    {% if item.name is defined %}
        {{ item.name }}
    {% else %}
        Unnamed Item: {{item}}
    {% endif %}
{% endmacro %}
<!-- Template for children -->
{% macro render_children(children) %}
  {% for child in children %}
    {% if child.children %}
      <li class="dropdown-submenu position-relative">
        <a class="dropdown-item dropdown-toggle" title="{{ child.description }}">
          {{ render_icon_and_name(child) }}
        </a>
        <ul class="dropdown-menu">
          {{ render_children(child.children) }}
        </ul>
      </li>

    {% elif child.identifier or child.warning or child.info %}
      <li>
        <a class="dropdown-item"
           onclick='openDynamicPopup({{ child|tojson|safe }})'
           data-bs-toggle="tooltip"
           title="{{ child.description }}">
          {{ render_icon_and_name(child) }}
        </a>
      </li>

    {% else %}
      <li>
        <a class="dropdown-item {% if child.iframe %}iframe-link{% endif %}"
           {% if child.onclick %}
             onclick="{{ child.onclick }}"
           {% else %}
             href="{{ child.url }}"
           {% endif %}
           target="{{ child.target|default('_blank') }}"
           data-bs-toggle="tooltip"
           title="{{ child.description }}">
          {{ render_icon_and_name(child) }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
{% endmacro %}

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light menu-{{menu_type}}">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
        <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
            {% for item in navigation[menu_type].children %}
                {% if item.url or item.onclick %}
                    <li class="nav-item">
                    <a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}"
                        {% if item.onclick %}
                        onclick="{{ item.onclick }}"
                        {% else %}
                        href="{{ item.url }}"
                        {% endif %}
                        target="{{ item.target|default('_blank') }}"
                        data-bs-toggle="tooltip"
                        title="{{ item.description }}">
                        {{ render_icon_and_name(item) }}
                    </a>
                    </li>
                {% else %}        
                <!-- Dropdown Menu -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
                            {% if item.icon is defined and item.icon.class is defined %}
                                {{ render_icon_and_name(item) }}
                            {% else %}
                                <p>Missing icon in item: {{ item }}</p>
                            {% endif %}
                        </a>
                        <ul class="dropdown-menu">
                            {{ render_children(item.children) }}
                        </ul>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
</nav>