<div class="c-menu-overlay c-overlay">
    <ul class="c-menu-overlay__content">
        <f:for each="{items}" as="item" iteration="iterator">
            <li class="c-menu-overlay__section">

                <div class="c-menu-overlay__item-divider">
                    <neos:link.node node="{item.node}" class="c-menu-overlay__main-menu-link">
                        {item.label}
                    </neos:link.node>

                    <button
                        class="c-menu-overlay__submenu-toggle"
                        data-target-enhancement
                        data-target-enhancement-exclusive-group="submenu-group"
                        data-target-enhancement-targets.0="#c-menu-overlay-submenu-{iterator.index}"
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded">

                        <span class="visually-hidden">
                            Subnavigation umschalten
                        </span>

                        <svg class="c-icon c-menu-overlay__submenu-toggle-icon" aria-hidden="false" focusable="false">
                            <use xlink:href="#icon-angle-right" />
                        </svg>
                    </button>
                </div>

                <f:if condition="{item.subItems}">
                    <ul class="c-menu-overlay-submenu" id="c-menu-overlay-submenu-{iterator.index}">
                        <f:render section="secondLevel" arguments="{parent: item, items: item.subItems, counter: menuItemIterator.cycle}" />
                    </ul>
                </f:if>
            </li>
        </f:for>
    </ul>

    <button
        class="c-button c-button--soft-rounded c-button-close"
        aria-label="Overlay schließen"
        data-overlay-close
        data-target-enhancement
        data-target-enhancement-exclusive-group="overlay-group"
        data-target-enhancement-targets.0=".c-menu-overlay"
        data-target-enhancement-classes.0="is-target"
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        aria-expanded="false">

        schließen

        <svg class="c-icon">
            <use xlink:href="#icon-close"></use>
        </svg>
    </button>
</div>

<f:section name="secondLevel">
    <f:for each="{items}" as="item">
        <li class="c-menu-overlay__submenu-item">
            <neos:link.node node="{item.node}"
            class="c-menu-overlay__submenu-link">
                {item.label}
            </neos:link.node>
        </li>
    </f:for>
</f:section>