typo3-13/packages/ep_theme/Resources/Private/Partials/Mainnav.html

<html data-namespace-typo3-fluid="true" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">

    <f:section name="Main">
        <div class="fixed top-0 left-0 inset-x-0 z-40 lg:relative lg:z-50 lg:container bg-white shadow-md lg:shadow-none">
            <div class="flex items-center hover-hover:lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
                <f:link.typolink parameter="{f:if(condition: settings.logoLink, then: settings.logoLink, else: settings.defaultHomeUid)}"
                                 class="block lg:pb-4"
                                 title="zur Startseite">
                    <f:image src="{settings.logoImage}"
                             class="block w-auto {ep:themeClasses(classes: '{ep: \'h-10 lg:h-12\', sbw: \'h-14 lg:h-24\', snz: \'h-14 lg:h-24\', suz: \'h-14 lg:h-24\', uch: \'h-12 lg:h-20\', ser: \'h-10 lg:h-12\'}', key: settings.themekey)}"
                             alt="Bildmarke"/>
                </f:link.typolink>
                <div class="hidden hover-hover:lg:block">
                    <f:render section="FirstLevel" arguments="{_all}"/>
                </div>
                <div class="flex hover-hover:lg:hidden items-center space-x-4">
                    <button type="button"
                            class="focus:outline-none text-zinc-800"
                            aria-label="Navigation öffnen"
                            data-controller="overlay-toggle"
                            data-overlay-toggle-id-value="mobilenav"
                            data-action="overlay-toggle#invokeToggle">
                        {ep:icon(icon: 'menu', class: 'w-8 h-8 text-zinc-800')}
                    </button>
                </div>
            </div>
        </div>
    </f:section>

    <f:section name="FirstLevel">
        <nav role="navigation" aria-label="Hauptnavigation">
            <ul class="m-0 p-0 list-none flex items-center justify-end space-x-4" 
                role="menubar" >
                <f:for each="{mainnav}" as="topitem">
                    <li class="group pb-4" role="none" data-controller="nav" data-nav-hidden-class="invisible opacity-0">
                        <f:if condition="{topitem.children}">
                            <f:then>
                                <a href="{f:uri.typolink(parameter: topitem.data.uid)}"
                                   role="menuitem"
                                   id="mainnav-{topitem.data.uid}"
                                   aria-haspopup="true"
                                   aria-expanded="false" 
                                   data-nav-target="button" 
                                   data-action="keydown.space->nav#toggle"                                                                      
                                   class="text-zinc-800 uppercase lg:text-lg font-bold flex items-center">
                                    <span>{topitem.title}</span>
                                    {ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 group-hover:rotate-180')}
                                </a>
                                <f:render section="SecondLevel" arguments="{topitem: topitem}"/>
                            </f:then>
                            <f:else>
                                <a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
                                   role="menuitem"
                                   class="block text-zinc-800 uppercase lg:text-lg font-bold">
                                    {topitem.title}
                                </a>
                            </f:else>
                        </f:if>
                    </li>
                </f:for>
            </ul>
        </nav>
    </f:section>

    <f:section name="SecondLevel">
        <div class="absolute top-100 left-0 inset-x-0 pt-4 z-50 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
            aria-hidden="true" 
            aria-labelledby="mainnav-{topitem.data.uid}" 
            data-nav-target="subnav">
            <div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg rounded">
                <f:for each="{topitem.children}" as="subitem">
                    <ul class="m-0 p-0 list-none" role="menu">
                        <li role="none">
                            <f:if condition="{subitem.doktype} == 3">
                                <f:then>
                                    <a href="{subitem.link}" target="_blank" role="menuitem">
                                        <f:if condition="{subitem.data.tx_eptheme_context_country_code}">
                                            {ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
                                        </f:if>
                                        <span class="text-zinc-800 uppercase lg:text-lg">
                                            {subitem.title}
                                        </span>
                                    </a>
                                </f:then>
                                <f:else>
                                    <a href="{f:uri.typolink(parameter: subitem.data.uid)}"
                                       role="menuitem"
                                       class="flex items-center space-x-2 underlined">
                                        <f:if condition="{subitem.data.tx_eptheme_context_country_code}">
                                            {ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
                                        </f:if>
                                        <span class="text-zinc-800 uppercase lg:text-lg">
                                            {subitem.title}
                                        </span>
                                    </a>
                                </f:else>
                            </f:if>
                        </li>
                        <f:render section="ThirdLevel" arguments="{subitem: subitem}"/>
                    </ul>
                </f:for>
            </div>
        </div>
    </f:section>

    <f:section name="ThirdLevel">
        <f:for each="{subitem.children}" as="subsubitem">
            <f:if condition="{subsubitem.doktype} == 3">
                <f:then>
                    <li role="none">
                        <a href="{subsubitem.link}"
                           class="text-zinc-800 text-lg"
                           target="_blank"
                           role="menuitem">
                            {subsubitem.title}
                        </a>
                    </li>
                </f:then>
                <f:else>
                    <li role="none">
                        <a href="{f:uri.typolink(parameter: subsubitem.data.uid)}"
                           class="text-zinc-800 text-lg"
                           role="menuitem">
                            {subsubitem.title}
                        </a>
                    </li>
                </f:else>
            </f:if>
        </f:for>
    </f:section>

</html>