[staticMenu mainmenu]
code = "mainmenu"
==
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-sky-900 inactive group h-14 border-b-4 border-red-900" x-data="{ open: false, active: {{activeMenuIndex}}, maintitle: '{{activeMenuTitle}}' }" :class="{'active': open === true, 'inactive': open === false, 'issubmenu': active !== null}">

    <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 h-16 px-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-blue-100 rotate-90 relative left-0 duration-200 relative' %}
                </a>
                <span class="duration-300 ml-0 font-semibold font-arvo text-blue-100 font-goudy text-2xl ml-0 group-[.issubmenu]:ml-6" x-text="maintitle"></span>
                <a href="/">
                    <img class="w-8 h-auto" {{'logos/wappen.png' | resize('original', '128|1280:192|1536:256')}}>
                </a>
            </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-blue-100 text-lg py-3 active:bg-gray-800 hover:bg-gray-800 duration-200">
                            <span>{{link.title}}</span>
                            {% if link.items | length %}
                                {% partial 'ui/sprite' icon='chevron' class='w-3 h-3 relative left-0 -rotate-90 text-blue-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-blue-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-blue-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 class="container items-center flex h-full [@media(min-width:900px)]:hidden">
        <nav class="flex items-center justify-between h-12">
            <a href="#" @click.prevent="open = true">
                {% partial 'ui/sprite' icon='menu' class='w-5 h-5 fill-current text-blue-100' %}
            </a>
        </nav>
    </div>

    <div class="container hidden [@media(min-width:900px)]:flex justify-center relative z-50 space-x-3 h-full">
        {% for item in menuItems %}
            <div class="relative group/parent h-full">
                <a class="h-full text-xl text-blue-100 hover:bg-sky-800 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 'ui/sprite' icon='chevron' class='w-3 h-3 ml-2 relative top-[0.15rem] text-blue-100 relative left-0 duration-200 relative' %}
                    {% endif %}
                </a>
                {% if item.items | length > 0 %}
                    <div class="absolute w-[250px] left-[50%] ml-[-125px] hidden group-hover/parent:block">
                        <svg preserveAspectRatio="none" viewBox="0 0 100 100" class="relative z-60 text-blue-50 mt-2 w-8 h-4 absolute left-1/2 -ml-4">
                            <path d="M0,100 L100,100 L50,0" fill="currentColor" />
                        </svg>
                        <div class="py-4 bg-blue-50 rounded-xl shadow-2xl">
                            {% for subitem in item.items %}
                                <a class="block px-6 duration-200 hover:bg-blue-200 py-2 text-neutral-800 text-center" href="{{ subitem.url }}">{{ subitem.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
</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>