<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{navSectionIndex}">
    <nav class="navbar navbar-section">
        <div class="nav-header" data-toggle="collapse" data-target=".nav">Inhaltsübersicht <span class="toggler is-shown icon-keyboard_arrow_up"></span><span class="toggler is-collapsed icon-keyboard_arrow_down"></span></div>
        <f:if condition="{navSectionIndex.0.content}">
            <ul class="nav collapse show">
                <f:for each="{navSectionIndex.0.content}" as="element">
                    <f:if condition="{element.data.header}">
                        <li class="nav-item">
                            <a class="nav-link" href="#c{element.data.uid}" title="{element.data.header}">{element.data.header}</a>
                        </li>
                    </f:if>
                </f:for>
            </ul>
        </f:if>
    </nav>
</f:if>
<v:asset.script name="scrollspy" overwrite="0" standalone="1" fluid="0" movable="1">
    $('body').scrollspy({target: '.navbar-section'});
    (function() {
        var mql = window.matchMedia('screen and (max-width:575px)');
        var elem = document.getElementsByClassName('nav collapse show')[0];
        if (mql.matches) {
            elem.classList.remove('show');
        }
    })();
</v:asset.script>
</html>
