107 lines
8.0 KiB
PHP
107 lines
8.0 KiB
PHP
<div x-data="{ open: false }" class="relative">
|
|
<button @click="open = true"
|
|
class="md:hidden fixed top-4 left-4 z-50 flex items-center px-3 py-2 bg-primary text-white rounded shadow-lg focus:outline-none"
|
|
type="button" aria-label="{{ __('Open menu') }}">
|
|
<i data-lucide="menu" class="w-6 h-6"></i>
|
|
</button>
|
|
|
|
<aside id="drawer-navigation" aria-label="Sidenav" aria-hidden="true" :class="{
|
|
'fixed inset-0 z-40 flex md:hidden bg-black/40': open,
|
|
'hidden md:block': !open,
|
|
'md:static md:inset-auto md:z-auto md:flex md:bg-transparent': true
|
|
}" x-show="open || window.innerWidth >= 768" @keydown.window.escape="open = false"
|
|
@click.self="open = false" x-cloak>
|
|
<div
|
|
class="flex flex-col h-full overflow-y-auto py-5 pl-3 pr-1 scrollbar-hide bg-white/90 md:bg-transparent md:shadow-none w-64 md:w-auto">
|
|
<button @click="open = false"
|
|
class="md:hidden mb-4 ml-auto flex items-center px-2 py-1 text-gray-700 hover:text-primary focus:outline-none"
|
|
aria-label="{{ __('Close menu') }}">
|
|
<i data-lucide="x" class="w-6 h-6"></i>
|
|
</button>
|
|
<ul x-data="{ visibleItems: [], showAll: true }" x-init="if (showAll) {
|
|
let total = {{ count($menu) }};
|
|
for (let i = 0; i < total; i++) {
|
|
setTimeout(() => visibleItems.push(i), i * 100);
|
|
}
|
|
}" class="space-y-2">
|
|
@foreach ($menu as $index => $item)
|
|
@php
|
|
$isActive = request()->routeIs($item['route_name']);
|
|
@endphp
|
|
|
|
<li x-show="visibleItems.includes({{ $index }})" x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-x-5"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 -translate-x-5" x-cloak
|
|
x-data="{ open: {{ $isActive ? 'true' : 'false' }} }" wire:key="menu-item-{{ $index }}">
|
|
|
|
@if (count($item['children'] ?? []) > 0)
|
|
<button @click="open = !open" type="button"
|
|
class="relative flex items-center pl-3 py-3 pr-2 text-base font-medium text-white rounded-lg overflow-hidden w-full
|
|
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700 cursor-pointer
|
|
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : '' }}">
|
|
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
|
|
<i data-lucide="{{ $item['icon'] }}"></i>
|
|
</span>
|
|
<span class="relative z-10 ml-3 text-white text-[.875rem]">{{ __($item['title']) }}</span>
|
|
<i data-lucide="chevron-down"
|
|
class="w-4 h-4 ml-auto transition-transform duration-300 transform"
|
|
:class="{ 'rotate-180': open }"></i>
|
|
</button>
|
|
|
|
<ul x-show="open" x-cloak x-data="{ visibleSubItems: [] }" x-init="$watch('open', (val) => {
|
|
if (val) {
|
|
visibleSubItems = [];
|
|
setTimeout(() => {
|
|
@foreach($item['children'] as $i => $subItem)
|
|
setTimeout(() => visibleSubItems.push({{ $i }}), {{ $i * 80 }});
|
|
@endforeach
|
|
}, 50);
|
|
} else {
|
|
visibleSubItems = [];
|
|
}
|
|
})" class="pl-6 mt-1 space-y-1 bg-white/10 rounded-lg">
|
|
@foreach ($item['children'] as $i => $subItem)
|
|
@if (empty($subItem['roles']) || auth()->guard('admin')->user()?->rolesIn($subItem['roles']))
|
|
<li x-show="visibleSubItems.includes({{ $i }})"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 -translate-x-4"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-x-0"
|
|
x-transition:leave-end="opacity-0 -translate-x-4" x-cloak>
|
|
<a href="{{ !empty($subItem['route_name']) ? route($subItem['route_name']) : url($subItem['slug'] ?? '#') }}"
|
|
class="relative flex items-center p-2 text-sm font-medium text-white/90 rounded-lg overflow-hidden
|
|
hover:text-white dark:hover:bg-gray-700 transition-transform transform hover:translate-x-1">
|
|
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
|
|
<i data-lucide="{{ $subItem['icon'] }}"></i>
|
|
</span>
|
|
<span class="relative z-10 ml-3 truncate">{{ __($subItem['title']) }}</span>
|
|
</a>
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
@else
|
|
|
|
<a href="{{ !empty($item['route_name']) ? route($item['route_name']) : url($item['slug'] ?? '#') }}"
|
|
class="relative flex items-center p-3 text-base font-medium rounded-lg overflow-hidden
|
|
cursor-pointer
|
|
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700
|
|
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : 'text-white' }}
|
|
">
|
|
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
|
|
<i data-lucide="{{ $item['icon'] }}"></i>
|
|
</span>
|
|
<span
|
|
class="relative z-10 ml-3 truncate text-white text-[.875rem]">{{ __($item['title']) }}</span>
|
|
</a>
|
|
@endif
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div> |