{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="mobilenav">
    <div class="mobilenav__inner">
        <nav role="navigation">
            <div class="mobilenav__primary">
                <ul class="plain-list">
                    <v:menu levels="1" useShortcutUid="1">
                        <f:for each="{menu}" as="item">
                            <li class="mobilenav__item"><a class="mobilenav__link" href="{item.link}">{item.linktext}</a></li>
                        </f:for>
                    </v:menu>
                </ul>
            </div>
            <div class="mobilenav__secondary">
                <ul class="plain-list">
                    <v:menu pageUid="{settings.helperNavPid}" useShortcutUid="1" expandAll="1">
                        <f:for each="{menu}" as="topItem">
                            <li class="mobilenav__item">
                                <a class="mobilenav__link{f:if(condition: topItem.hasSubPages, then: ' subnav-toggle')}" href="{topItem.link}">{topItem.linktext}</a>
                                <f:if condition="{topItem.hasSubPages}">
                                    <span class="mobilenav__sub-flag">+</span>
                                    <div class="mobilenav__subnav">
                                        <ul class="plain-list">
                                            <v:menu pageUid="{topItem.uid}" useShortcutUid="1">
                                                <f:for each="{menu}" as="subItem">
                                                    <li class="mobilenav__subitem"><a class="mobilenav__sublink" href="{subItem.link}">{subItem.linktext}</a></li>
                                                </f:for>
                                            </v:menu>
                                        </ul>
                                    </div>
                                </f:if>
                            </li>
                        </f:for>
                    </v:menu>
                </ul>
                <f:if condition="{settings.enableLanguageSwitch}">
                    <ul class="plain-list">
                        <f:for each="{langnav}" as="language">
                            <f:if condition="{language.available}">
                                <f:if condition="{language.active}">
                                    <f:else>
                                            <li class="mobilenav__item">
                                                <a class="mobilenav__link" href="{language.link}" title="{language.data.title}">
                                                    {f:if(condition: '{language.languageUid} == 0', then: 'Deutsch', else: 'English')}
                                                </a>
                                            </li>
                                    </f:else>
                                </f:if>
                            </f:if>
                        </f:for>
                    </ul>
                </f:if>
            </div>
        </nav>
        <div class="mobilenav__search">
            <f:cObject typoscriptObjectPath="lib.searchForm"/>
        </div>
        <a class="button button--transparent button--full" href="{f:uri.typolink(parameter: settings.contactPageUid)}">{f:translate(key: 'tx_epevents.label.inquiry', extensionName: 'ep_events') -> f:format.raw()}</a>
    </div>
</div>