<ul class="first-ul first-level flex ">
{% for page in mainNavigation %}
{% if (page.isVisible and menuRenderer.accept(page)) %}
<li class="first-li">
<a href="{{ page.href }}" class="first-a {% if id == page.getId() %}act-link{% endif %}">{{ page.label }}</a>
{% if page.hasPages %}
<ul class="second-level">
{% for child in page.pages %}
{% if (child.isVisible and menuRenderer.accept(child)) %}
<li>
<a href="{{ child.href }}" {% if id == child.getId() %}class="act-link"{% endif %}>{{ child.label }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>