Sub-navigation in Grav CMS - content-management-system

Question

I want to make a subnav for my Grav Theme. I already saw a question on this topic:
GRAV subnavigation
{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
The problem I ran into is that with my code the pages get listed two times in the navigation and that's because of the a-tag in the dropdown div.
Is there a way that I can have the a-tag in the dropdown with all the information I wrote in my code? And that it only appears once in the navigation.
Thanks for your answers!

Answer 1

{% block navigation %}
{% macro loop(page) %}
{% for p in page.children %}
{% if p.visible %}
{% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
<div>
{% if p.children.count > 0 %}
<div class="dropdown">
<a href="{{ p.url }}" class="btn btn-nav dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{ p.menu }}
<span class="icon icon--bottom"></span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenulink" x-placement="bottom-start">
{{ _self.loop(p) }}
</div>
</div>
{% else %}
<a href="{{ p.url }}" class="btn btn-nav" role="button">
{{ p.menu }}
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
{% endmacro %}
{% endblock %}
<div class="topics" style="display: flex;">
{{ _self.loop(pages) }}
</div>
This is the code I used instead of what I wrote in my question