132 lines
8.0 KiB
HTML
132 lines
8.0 KiB
HTML
[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>
|