70 lines
2.4 KiB
PHP
70 lines
2.4 KiB
PHP
<ul class="flex flex-row space-x-7 text-base font-medium">
|
|
@foreach ($items as $item)
|
|
@if (isset($item['dropdown']))
|
|
<li class="relative group">
|
|
<a href="javascript:void(0);" onclick="toggleDropdown(this)" class="inline-flex items-center">
|
|
{{ $item['name'] }}
|
|
<i
|
|
class="fa-solid fa-chevron-down ml-2 text-gray-700 chevron-icon transition-transform duration-300 ease-in-out"></i>
|
|
</a>
|
|
<ul
|
|
class="absolute left-0 mt-2 bg-white shadow-lg rounded-md w-48 hidden ring-2 ring-gray-700 transition-all duration-300 ease-in-out">
|
|
@foreach ($item['dropdown'] as $dropdownItem)
|
|
<li class="px-4 py-2 hover:bg-gray-200 rounded-md">
|
|
<a href="{{ $dropdownItem['url'] }}">{{ $dropdownItem['name'] }}</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</li>
|
|
@else
|
|
<li>
|
|
<a href="{{ $item['url'] }}" class="text-gray-700">{{ $item['name'] }}</a>
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
|
|
<script>
|
|
let activeDropdown = null;
|
|
|
|
function toggleDropdown(element) {
|
|
const dropdown = element.closest('li').querySelector('ul');
|
|
const icon = element.querySelector('.chevron-icon');
|
|
|
|
if (activeDropdown && activeDropdown !== dropdown) {
|
|
closeDropdown(activeDropdown);
|
|
}
|
|
|
|
dropdown.classList.toggle('hidden');
|
|
icon.classList.toggle('-rotate-180');
|
|
|
|
activeDropdown = dropdown.classList.contains('hidden') ? null : dropdown;
|
|
|
|
event.stopPropagation();
|
|
}
|
|
|
|
function closeDropdown(dropdown) {
|
|
if (dropdown) {
|
|
dropdown.classList.add('hidden');
|
|
const icon = dropdown.closest('li').querySelector('.chevron-icon');
|
|
if (icon) icon.classList.remove('-rotate-180');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (activeDropdown && !event.target.closest('li.group')) {
|
|
closeDropdown(activeDropdown);
|
|
activeDropdown = null;
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('li.group ul li a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
if (activeDropdown) {
|
|
closeDropdown(activeDropdown);
|
|
activeDropdown = null;
|
|
}
|
|
});
|
|
});
|
|
</script>
|