Shaun Collins
46 lines
1.8 KiB
PHP
46 lines
1.8 KiB
PHP
<div class="w-full bg-primary text-white py-4 shadow-lg">
|
|
<div class="container mx-auto flex items-center justify-between md:gap-6">
|
|
<a href="/">
|
|
<img src="{{ asset('images/logo.jpg') }}" alt="{{ config('app.name') }}" class="logo-size mx-3">
|
|
</a>
|
|
|
|
<button class="md:hidden bg-secondary p-2 text-white focus:outline-none" id="mobile-nav-toggle">
|
|
<i class="fas fa-bars text-2xl"></i>
|
|
</button>
|
|
|
|
<nav
|
|
class="hidden md:flex flex-col md:flex-row w-full md:w-auto md:space-x-6 absolute md:static top-16 left-0 z-50 transition-all"
|
|
id="mobile-nav"
|
|
>
|
|
@foreach(config('routes.web') as $route)
|
|
<a
|
|
class="block md:flex text-lg text-center py-2 md:py-0 px-4 md:px-0 text-white btn btn-secondary @if(Route::currentRouteName() === $route['name']) disabled @endif"
|
|
href="{{ $route['path'] }}"
|
|
>
|
|
{{ $route['name'] }}
|
|
@if(isset($route['icon']))
|
|
<i class="ml-2 {{ $route['icon'] }}"></i>
|
|
@endif
|
|
</a>
|
|
@endforeach
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const toggleButton = document.getElementById("mobile-nav-toggle");
|
|
const mobileNav = document.getElementById("mobile-nav");
|
|
|
|
if (toggleButton && mobileNav) {
|
|
toggleButton.addEventListener("click", () => {
|
|
const isHidden = mobileNav.classList.contains("hidden");
|
|
mobileNav.classList.toggle("hidden", !isHidden);
|
|
mobileNav.classList.toggle("flex", isHidden);
|
|
mobileNav.classList.toggle("flex-col", isHidden);
|
|
mobileNav.classList.toggle("space-y-4", isHidden);
|
|
});
|
|
}
|
|
});
|
|
</script>
|