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

<f:asset.css identifier="mmenu" priority="true">
    .navbar-mobile { display: none; }
    .navbar-mobile.mm-menu { display: flex; }
</f:asset.css>


<f:if condition="{mobilenavigation}">
    <nav id="nav-mobile" class="navbar-mobile">
        <ul>
            <f:for each="{mobilenavigation}" as="mainItem">
                <f:render section="item" arguments="{item: mainItem}"/>
                <f:if condition="{mainItem.children}">
                    <f:render section="submenu" arguments="{submenu: mainItem.children}"/>
                </f:if>
                </li>
            </f:for>
        </ul>
    </nav>
</f:if>


<f:section name="submenu">
    <ul>
        <f:for each="{submenu}" as="subItem">
            <f:render section="item" arguments="{item: subItem}"/>
            <f:if condition="{subItem.children}">
                <f:render section="submenu" arguments="{submenu: subItem.children}"/>
            </f:if>
            </li>
        </f:for>
    </ul>
</f:section>

<f:section name="item">
    <f:if condition="{item.spacer} || {item.current}">
        <f:then>
            <li class="{f:if(condition:item.current, then:' current')}{f:if(condition:item.spacer, then:' spacer')}">
                <span>{item.title}</span>
        </f:then>
        <f:else if="{item.active}">
            <li class="{f:if(condition:item.active, then:' active')}">
                <f:render section="link" arguments="{item: item}"/>
        </f:else>
        <f:else>
            <li>

                <f:render section="link" arguments="{item: item}"/>
        </f:else>
    </f:if>
</f:section>

<f:section name="link">
    <f:if condition="{item.data.target} && {item.link} != 'https://www.serag-wiessner.de/#'">
        <f:then>
            <a href="{item.link}" target="{item.data.target}" title="{item.data.title}">
        </f:then>
        <f:else if="{item.target} && {item.link} != 'https://www.serag-wiessner.de/#'">
            <a href="{item.link}" target="{item.target}" title="{item.data.title}">
        </f:else>
        <f:else>
            <f:if condition="{item.link} != 'https://www.serag-wiessner.de/#'">
                <a href="{item.link}" title="{item.data.title}">
            </f:if>
        </f:else>
    </f:if>

    <f:if condition="{item.link} != 'https://www.serag-wiessner.de/#'">
        <f:then>
            {item.title -> f:format.raw()}
            </a>
        </f:then>
        <f:else>
            <span class="mm-pseudolink">{item.title}</span>
        </f:else>

    </f:if>
</f:section>

