port-ui/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}} mb-0">
    <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}}">
        {% if menu_type == "header" %}
        <a class="navbar-brand align-items-center d-flex js-restore" id="navbar_logo" href="#">
            <img
                src="{{ asset_src(platform.logo) }}"
                alt="{{ platform.titel }}"
                class="d-inline-block align-text-top"
                style="height:2rem">
            <div class="ms-2 d-flex flex-column">
                <span class="fs-4 fw-bold mb-0">{{ platform.titel }}</span>
                {# <small class="fs-7 text-muted">{{ platform.subtitel }}</small> #}
            </div>
            {% endif %}
        </a>
        <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-toggle="dropdown" 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>