<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div class="navbar navbar-mobileheader">
    <ul class="navbar-nav">
        <li class="nav-item nav-item--home">
            <f:link.page pageUid="{rootPage}" class="nav-link nav-link--logo" title="{settings.logo.linktitle}">
                <img class="" src="{f:uri.image(src: settings.logo.file-white)}" alt="{settings.logo.alt}" height="{settings.logo.height}" width="{settings.logo.width}"/>
            </f:link.page>
        </li>
        <li class="nav-item nav-item--toggler">
            <span>Menü</span>
            <a class="toggler mburger mburger--collapse" id="toggler" href="#nav-mobile" title="Navigation anzeigen"><b></b><b></b><b></b></a>
        </li>
    </ul>
</div>

<nav class="navbar navbar-mobile" id="nav-mobile">
    <ul class="nav">
        <li class="nav-item nav-item--home">
            <f:link.page pageUid="{rootPage}" class="nav-link nav-link--text text-uppercase">
                Startseite
            </f:link.page>
        </li>
        <f:for each="{nav}" as="navItem">
            <li class="nav-item{f:if(condition: navItem.active, then: ' active')}{f:if(condition: navItem.current, then: ' current Selected')}{f:if(condition: navItem.children, then: ' parent')}">
                <f:if condition="{navItem.children}">
                    <f:then>
                        <a class="nav-link text-uppercase" href="{navItem.link}">{navItem.title -> f:format.htmlentitiesDecode()}</a>
                        <f:render section="submenu" arguments="{submenu: navItem.children, dropdownToggler:navItem.data.alias}"/>
                    </f:then>
                    <f:else>
                        <f:link.typolink parameter="{navItem.link}" class="nav-link text-uppercase" >{navItem.title -> f:format.htmlentitiesDecode()}</f:link.typolink>
                    </f:else>
                </f:if>
            </li>
        </f:for>
    </ul>
</nav>
<f:section name="submenu">
    <ul class="sub-nav">
        <f:for each="{submenu}" as="subItem">
            <li class="nav-item nav-item--sub nav-item--sub-{v:format.sanitizeString(string: subItem.data.uid)}{f:if(condition: subItem.active, then: ' active')}{f:if(condition: subItem.current, then: ' current Selected')}{f:if(condition: subItem.children, then: ' parent')}">
                <a class="nav-link" href="{subItem.link}" data-uid="{subItem.data.uid}">{subItem.title-> f:format.htmlentitiesDecode()}</a>
            </li>
        </f:for>
    </ul>
</f:section>
