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

<f:variable name="headerClass">bp-page-header navbar navbar-mainnavigation navbar-{theme.navigation.style}</f:variable>
<f:variable name="headerClass">{headerClass}{f:if(condition: logo.normal, then:' navbar-has-image')}</f:variable>
<f:variable name="headerClass">{headerClass}{f:if(condition: theme.navigation.type, else:' navbar-top', then:' navbar-{theme.navigation.type} navbar-fixed-{theme.navigation.type}')}</f:variable>
<header id="page-header" class="{headerClass}">
    <div class="container">
        <f:link.page pageUid="{rootPage}" class="navbar-brand navbar-brand-{f:if(condition: logo.normal, then: 'image', else: 'text')}" title="{settings.logo.linktitle}">
            <f:if condition="{logo.normal}">
                <f:then>
                    <img class="navbar-brand-logo-normal" src="{f:uri.image(image: logo.normal)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                    <f:if condition="{logo.inverted}">
                        <img class="navbar-brand-logo-inverted" src="{f:uri.image(image: logo.inverted)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
                    </f:if>
                </f:then>
                <f:else>
                    <span>{siteTitle}</span>
                </f:else>
            </f:if>
        </f:link.page>
        <f:if condition="{mainnavigation}">
            <nav class="contactnav">
                <ul class="navbar-nav">
                    <li class="nav-item d-lg-none ">
                        <a class="nav-link" href="tel:+49926499120">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M2.267.98a1.636 1.636 0 0 1 2.448.152l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"/>
                            </svg>
                        </a>
                    </li>
                    <f:comment>
                    <li class="nav-item">
                        <a href="tel:+49926499120" class="nav-link">09264/9912-0</a>
                    </li>
                    <li class="nav-item">
                        <a href="mailto:info@muehlherr.de" class="nav-link">info@muehlherr.de</a>
                    </li>
                    </f:comment>
                </ul>
            </nav>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="{f:translate(key: 'togglenavigation', extensionName: 'bootstrap_package')}">
                <span class="navbar-toggler-icon"></span>
            </button>
            <nav id="mainnavigation" class="collapse navbar-collapse">
                <f:render partial="DropIn/Navigation/MainBefore" arguments="{_all}"/>
                <f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}"/>
                <f:render partial="DropIn/Navigation/MainAfter" arguments="{_all}"/>
            </nav>



        </f:if>
    </div>
</header>

<f:section name="MainNavigation">
    <f:if condition="{menu}">
        <ul class="navbar-nav">
            <f:for each="{menu}" as="item">
                <f:if condition="{item.spacer}">
                    <f:then>
        </ul>
        <ul class="navbar-nav">
            </f:then>
            <f:else>
                <li class="nav-item{f:if(condition: item.active, then:' active')}{f:if(condition: item.children, then:' dropdown dropdown-hover')}">
                    <a href="{item.link}" id="nav-item-{item.data.uid}" class="nav-link{f:if(condition: item.children, then:' dropdown-toggle')}" {f:if(condition: item.target, then: ' target="{item.target}"')} title="{item.title}"{f:if(condition: item.children, then:' aria-haspopup="true" aria-expanded="false"')}>
                    <f:if condition="{theme.navigation.icon.enable} && {item.icon}">
                                    <span class="nav-link-icon">
                                        <f:if condition="{item.icon.0.extension} === svg">
                                            <f:then>
                                                <bk2k:inlineSvg image="{item.icon.file}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}"/>
                                            </f:then>
                                            <f:else>
                                                <f:image additionalAttributes="{loading: 'lazy'}" image="{item.icon.file}" alt="{item.icon.file.alternative}" title="{item.icon.file.title}" width="{theme.navigation.icon.width}" height="{theme.navigation.icon.height}"/>
                                            </f:else>
                                        </f:if>
                                    </span>
                    </f:if>
                    <span class="nav-link-text">{item.title}<f:if condition="{item.current}"> <span class="sr-only">(current)</span></f:if></span>
                    </a>
                    <f:if condition="{item.children}">
                        <ul class="dropdown-menu" aria-labelledby="nav-item-{item.data.uid}">
                            <f:for each="{item.children}" as="child">
                                <f:if condition="{child.spacer}">
                                    <f:then>
                                        <li class="dropdown-divider"></li>
                                    </f:then>
                                    <f:else>
                                        <li>
                                            <a href="{child.link}" class="dropdown-item{f:if(condition: child.active, then:' active')}" {f:if(condition: child.target, then: ' target="{child.target}"')} title="{child.title}">
                                            <f:if condition="{theme.navigation.dropdown.icon.enable} && {child.icon}">
                                                            <span class="dropdown-icon">
                                                                <f:if condition="{child.icon.0.extension} === svg">
                                                                    <f:then>
                                                                        <bk2k:inlineSvg image="{child.icon.0}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}"/>
                                                                    </f:then>
                                                                    <f:else>
                                                                        <f:image additionalAttributes="{loading: 'lazy'}" image="{child.icon.0}" alt="{child.icon.0.alternative}" title="{child.icon.0.title}" width="{theme.navigation.dropdown.icon.width}" height="{theme.navigation.dropdown.icon.height}"/>
                                                                    </f:else>
                                                                </f:if>
                                                            </span>
                                            </f:if>
                                            <span class="dropdown-text">{child.title}<f:if condition="{child.current}"> <span class="sr-only">(current)</span></f:if></span>
                                            </a>
                                        </li>
                                    </f:else>
                                </f:if>
                            </f:for>
                        </ul>
                    </f:if>
                </li>
            </f:else>
    </f:if>
    </f:for>
    </ul>
    </f:if>
</f:section>
</html>
