{% if not document is defined or not document %}
{% set document = pimcore_document(1) %}
{% endif %}
{% set mainNavigation = app_navigation_data_links(document, pimcore_document(1)) %}
<div class="mobile-nav">
<ul>
{% for page in mainNavigation %}
{% set navigationDocument = page.getDocument() %}
{% if page.isVisible() %}
{% if page.hasPages() %}
<li class="menu-item-has-children">
<a href="javascript:void(0)">
{{ page.getTitle() }}<i style="margin-left: 10px;" class="fa fa-caret-right"></i>
</a>
{% set navigationDocumentChildPages = page.getPages() %}
<ul class="sub-menu">
<button class="back-button">Back</button>
{% for navigationDocumentChildPage in navigationDocumentChildPages %}
{% if navigationDocumentChildPage.isVisible() %}
{% if navigationDocumentChildPage.getUri() is not empty %}
<li>
<a href="{{ navigationDocumentChildPage.getUri() }}">
{{ navigationDocumentChildPage.getLabel() }}
</a>
</li>
{% else %}
<li class="menu-item-has-children">
{% if navigationDocumentChildPage.hasPages() %}
<a href="javascript:void(0)">
{{ navigationDocumentChildPage.getLabel() }}<i style="margin-left: 10px;" class="fa fa-caret-right"></i>
</a>
{% else %}
<a href="{{ page.getUri() }}">{{ page.getLabel() }}</a>
{% endif %}
{% endif %}
{% if navigationDocumentChildPage.hasPages() %}
<ul class="sub-menu">
<button class="back-button">Back</button>
{% for navigationDocumentChildChildPage in navigationDocumentChildPage.getPages() %}
{% if navigationDocumentChildChildPage.isVisible() %}
<li>
<a href="{{ navigationDocumentChildChildPage.getUri() }}">
{{ navigationDocumentChildChildPage.getLabel() }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li>
<a href="{{ page.getUri() }}">{{ page.getLabel() }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
</div>