wn-silva-theme/partials/shared/header.htm

[staticMenu mainmenu]
code = "hauptmenu"
==
function onEnd() {
    $this['baseMenuTitle'] = config('app.name');
    $this['activeMenuIndex'] = collect($this['menuItems'])->filter(fn ($entry) => ($entry->isChildActive || $entry->isActive) && count($entry->items))->keys()->first() ?? 'null';
    $this['activeMenuTitle'] = collect($this['menuItems'])->filter(fn ($entry) => ($entry->isChildActive || $entry->isActive) && count($entry->items))->first()?->title ?: config('app.name');
}
==
<nav class="bg-cyan-900">


    <div x-data="{ open: false, active: {{activeMenuIndex}}, maintitle: '{{activeMenuTitle}}' }" :class="{'active': open === true, 'inactive': open === false, 'issubmenu': active !== null}"
        class="inactive container items-center group flex [@media(min-width:900px)]:hidden"
    >
        <nav class="flex items-center justify-between h-12 bg-primary-700">
            <a href="#" @click.prevent="open = true" data-backstop-navbar-toggle>
                {% partial 'ui/sprite' icon='menu' class='w-5 h-5 fill-current text-cyan-100' %}
            </a>
        </nav>

        <div class="flex items-start fixed top-0 left-0 w-full h-full z-50 duration-300
            group-[.active]:visible group-[.active]:bg-black/50
            group-[.inactive]:bg-transparent group-[.inactive]:invisible
        " @click.self="open = false">
            <nav class="w-64 h-full relative overflow-y-auto overflow-x-hidden shadow-2xl bg-gray-900 duration-300 flex flex-col
                group-[.inactive]:-left-64 group-[.active]:left-0
            ">
                <div class="sticky top-0 z-10 bg-gray-800 text-white flex justify-between items-center p-4">
                    <a href="#" @click.prevent="active = null; maintitle='{{baseMenuTitle}}'" class="absolute -left-6 duration-300 group-[.issubmenu]:left-3">
                        {% partial 'ui/sprite' icon='chevron' class='w-4 h-4 text-cyan-100 rotate-90 relative left-0 duration-200 relative' %}
                    </a>
                    <span class="duration-300 ml-0 font-semibold font-barlow text-cyan-100 font-goudy text-2xl ml-0 group-[.issubmenu]:ml-6" x-text="maintitle"></span>
                </div>
                <div class="pt-4 relative grow">
                    <div class="flex flex-col duration-300 relative right-0 group-[.issubmenu]:right-full">
                        {% for index, link in menuItems %}
                            <a href="{% if link.items | length %}#{% else %}{{link.url}}{% endif %}" {% if link.items | length %}@click.prevent="active = {{index}}; maintitle='{{link.title}}'"{% endif %} class="px-4 flex items-center justify-between group/sublink font-goudy text-cyan-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200">
                                <span>{{link.title}}</span>
                                {% if link.items | length %}
                                    {% partial 'sprite' icon='chevron' class='w-3 h-3 relative left-0 -rotate-90 text-cyan-100 duration-200 group-hover/sublink:left-1 relative' %}
                                {% endif %}
                            </a>
                        {% endfor %}
                    </div>
                    {% for index, link in menuItems %}

                        <div class="overflow-x-hidden overflow-y-auto absolute pt-4 top-0 w-full h-full left-full duration-300" :class="{'left-full': active !== {{index}}, 'left-0': active === {{index}} }">
                            {% for sublink in link.items %}

                                <a href="{{sublink.url}}" class="px-4 flex items-center justify-between font-goudy text-cyan-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if sublink.isActive %} font-bold text-white {% endif %}">
                                    {{sublink.title}}
                                </a>
                                <div class="ml-5 border-l border-gray-800">
                                    {% for subsublink in sublink.items %}
                                    <a href="{{subsublink.url}}" class="px-4 flex items-center justify-between text-cyan-100 text-sm py-3 active:bg-gray-800 hover:bg-gray-800 duration-200 {% if subsublink.isActive %} font-bold text-white {% endif %}">
                                        {{subsublink.title}}
                                    </a>
                                    {% endfor %}
                                </div>
                            {% endfor %}

                        </div>
                    {% endfor %}
                </div>
            </nav>
            <a href="#" class="relative mt-3 ml-3 duration-300
                group-[.inactive]:-left-64 group-[.inactive]:opacity-0 group-[.inactive]:invisible
                group-[.active]:left-0 group-[.active]:opacity-100 group-[.active]:visible
            " @click="open = false">
                <svg class="w-6 h-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z" /></svg>
            </a>
        </div>
    </div>

    <div class="container hidden [@media(min-width:900px)]:flex space-x-3 items-center">
        {% for item in menuItems %}
            <div class="relative group">
                <a class="h-14 text-xl text-cyan-100 hover:bg-cyan-700 duration-200 flex items-center px-6"
                    href="{% if item.items | length > 0 %}#{% else %}{{ item.url }}{% endif %}" {% if item.viewBag.isExternal %} target="_BLANK" {% endif %}
                >
                    {{ item.title }}
                    {% if item.items|length %}
                        {% partial 'sprite' icon='chevron' class='w-3 h-3 ml-2 relative top-[0.15rem] text-cyan-100 relative left-0 duration-200 relative' %}
                    {% endif %}
                </a>
                {% if item.items | length > 0 %}
                    <div class="absolute py-4 bg-blue-400 hidden group-hover:block rounded-b-xl shadow-xl">
                        {% for subitem in item.items %}
                        <a class="block px-6 duration-200 hover:bg-blue-500 py-2 text-teal-50" href="{{ subitem.url }}">{{ subitem.title }}</a>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>


    <nav class="bg-primary-700 border-b-4 border-solid border-dpsgred justify-center hidden navbar:flex">
        {% for item in mainmenu.menuItems | nothidden %}
        <div class="relative group">
            <a class="font-sans text-white text-xl py-3 px-4 transition-color duration-100 hover:bg-primary-600 block" href="{{item.url}}">{{item.title}}</a>
            {% if item.items | length %}
                <div class="absolute z-10 pt-5 left-1/2 w-64 -ml-32 hidden group-hover:block">
                    <div class="bg-white rounded-lg shadow-xl flex flex-col py-4 relative">
                        <div class="absolute top-0 -mt-3 flex justify-center w-full">
                            <svg viewBox="0 0 26 16" class="fill-current text-white" width="26" height="16">
                                <path d="M0,16 L26,16 L13,0 L0,16"></path>
                            </svg>
                        </div>
                        {% for subitem in item.items | nothidden %}
                            <a href="{{subitem.url}}" class="text-center px-4 hover:bg-gray-100 py-2">{{subitem.title}}</a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
        {% endfor %}
    </nav>
</nav>

<div class="relative">
    <img {{header_image | resize('header')}} class="h-64 object-cover lg:h-auto">
    <div class="absolute w-full h-full top-0 left-0">
        <div class="container flex justify-center md:justify-end items-center h-full">
            <a href="/">
                <img {{logo | resize('original', '128|1280:192|1536:256') }} class="w-32 xl:w-48 xxl:w-64 h-auto">
            </a>
        </div>
    </div>
</div>