<nav class="main-nav" id="mainNav">
    <div class="container">
        <a href="/" class="nav-logo">
            <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" />
        </a>
        <button class="nav-toggle" id="navToggle" aria-label="Toggle Menu">
            <span class="nav-toggle-icon"></span>
        </button>

        <ul class="nav-links" id="navLinks">
            <f:for each="{mainnavigation}" as="mainnavigationItem">
                <li class="nav-item{f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">
                    <a href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">
                        {mainnavigationItem.title}
                    </a>
                    <f:if condition="{mainnavigationItem.children}">
                        <ul class="sub-menu">
                            <f:for each="{mainnavigationItem.children}" as="child">
                                <li class="{f:if(condition: child.active, then:'active')}">
                                    <a class="nav-link" href="{child.link}" target="{child.target}" title="{child.title}">
                                        {child.title}
                                    </a>
                                </li>
                            </f:for>
                        </ul>
                    </f:if>
                </li>
            </f:for>
        </ul>
    </div>
</nav>
