ot_typo3/ot_templating/Resources/Private/Partials/Modern/Menu.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!--
    -- MenuViewHelper  --
    Voir: https://fluidtypo3.org/viewhelpers/vhs/master/MenuViewHelper.html
--></f:comment>

<f:comment><!--Navbar: Menu de premier niveau.
           Si les items ont des sous-pages, on leur donne la classe dropdown--></f:comment>

<div class="menu theme-bg">
    <nav id="menu" class="mega-menu">

        <f:comment><!-- menu list items container --></f:comment>
        <section class="menu-list-items">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12">

                        <f:comment><!-- menu logo --></f:comment>
                        <ul class="menu-logo">
                            <li>
                                <f:if condition="{settings.structureLogoId}">
                                    <f:then>
                                        <a href="{ot:rootPage.getUri()}" title="{settings.structureName}">
                                            <img id="logo_img"
                                                 src="{ot:getImageUrl(fileId: settings.structureLogoId, size: 'sm')}"
                                                 alt="{settings.structureName}"/>
                                        </a>
                                    </f:then>
                                    <f:else>
                                        <f:comment><!-- little hack to avoid some bugs with css structure --></f:comment>
                                        <div style="height: 40px"></div>
                                    </f:else>
                                </f:if>
                            </li>
                        </ul>

                        <f:comment><!-- menu links --></f:comment>
                        <div class="menu-bar">

                            <v:menu as="mainMenu"
                                    classActive="active"
                                    pageUid="{ot:rootPage.getId()}">

                                <ul class="menu-links" style="display: none;">

                                    <f:for each="{mainMenu}" as="mainMenuItem">
                                        <li class="hoverTrigger {mainMenuItem.class}">
                                            <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
                                                {mainMenuItem.linktext}
                                                <f:if condition="{mainMenuItem.hasSubPages}">
                                                    <i class="fa fa-angle-down fa-indicator"></i>
                                                </f:if>
                                            </f:link.page>

                                            <f:if condition="{mainMenuItem.hasSubPages}">
                                                <ul class="drop-down-multilevel">
                                                    <v:menu as="subMenu"
                                                            pageUid="{mainMenuItem.uid}"
                                                            classActive="active">
                                                        <f:for each="{subMenu}" as="subMenuItem">
                                                            <li class="{subMenuItem.class}">
                                                                <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
                                                                    {subMenuItem.title}

                                                                    <f:if condition="{subMenuItem.hasSubPages}">
                                                                        <i class="ti-plus fa-indicator"></i>
                                                                    </f:if>
                                                                </f:link.page>

                                                                <f:if condition="{subMenuItem.hasSubPages}">
                                                                    <v:menu as="thirdLevelMenu"
                                                                            pageUid="{subMenuItem.uid}"
                                                                            classActive="active">

                                                                        <ul class="drop-down-multilevel"
                                                                            style="transition: all 400ms ease 0s;">

                                                                            <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
                                                                                <li class="{thirdLevelMenuItem.class}">
                                                                                    <f:link.page pageUid="{thirdLevelMenuItem.uid}"
                                                                                                 title="{thirdLevelMenuItem.linktext}">
                                                                                        {thirdLevelMenuItem.title}
                                                                                    </f:link.page>
                                                                                </li>
                                                                            </f:for>

                                                                        </ul>
                                                                    </v:menu>
                                                                </f:if>

                                                            </li>
                                                        </f:for>
                                                    </v:menu>
                                                </ul>
                                            </f:if>
                                        </li>
                                    </f:for>
                                </ul>
                            </v:menu>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </nav>
</div>