I'm trying to port the TXT theme from HMLT5 UP to Grav. However TXT has sub-dropdown menus, something that I find very useful. In the http://saveourplanet.org/ (which uses the TXT theme as a base), I hardcoded the sub-dropdown menus in. Later on I got it a little more dynamic, but it's still not right. I currently have it hardcoded in to only show sub-dropdowns for /about/team, since it was showing blank ones for all menu items. How would I go about properly implementing this? Here's my current navigation.html.twig for the above site:
TWIG
{% macro loop(page) %}
{% for p in page.children.visible %}
{% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">
<a href="{{ p.url }}">
{% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
{{ p.menu }}
</a>
{% if p.children.visible.count > 0 %}
<ul>
{{ _self.loop(p) }}
</ul>
{% endif %}
</li>
{% endfor %}
{% endmacro %}
<nav id="nav">
<ul>
{% if theme_config.dropdown.enabled %}
{{ _self.loop(pages) }}
{% else %}
{% for page in pages.children.visible %}
{% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
<li class="{{ current_page }}">
<a href="{{ page.url }}">
{% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
{{ page.menu }}
</a>
{% if page.header.dropdown %}
<ul>
{% for page in page.children.visible %}
<li>
<li class="{{ current_page }}">
<a href="{{ page.url }}">
{% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
{{ page.menu }}
</a>
{% if page == page.find('/about/team') %}
<ul>
{% for page in page.children.visible %}
<li>
<li class="{{ current_page }}">
<a href="{{ page.url }}">
{% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
{{ page.menu }}
</a>
</li>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endif %}
{% for mitem in site.menu %}
<li>
<a href="{{ mitem.url }}">
{% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
{{ mitem.text }}
</a>
</li>
{% endfor %}
</ul>
</nav>
---