2025-08-26 11:25:53 +08:00
|
|
|
<div x-data="{ open: false }" @click.outside="open = false" class="relative">
|
|
|
|
|
<!-- Menu Toggle -->
|
|
|
|
|
<button class="absolute top-2.5 left-2.5 cursor-pointer" @click="open = !open" aria-label="Toggle Menu">
|
|
|
|
|
<x-icon name="bars-3" solid class="w-9 h-9 text-gray-700" />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Navigation Menu -->
|
|
|
|
|
<nav
|
|
|
|
|
class="fixed top-0 left-0 h-full w-64 bg-white shadow-lg transform -translate-x-full transition-transform duration-300 ease-in-out z-50"
|
|
|
|
|
:class="{ 'translate-x-0': open }"
|
|
|
|
|
>
|
|
|
|
|
<div class="divide-y">
|
|
|
|
|
@guest
|
|
|
|
|
<x-button flat class="w-full justify-start px-4 py-3" :href="route('login')" label="Log in / Register" />
|
|
|
|
|
@endguest
|
|
|
|
|
|
|
|
|
|
@foreach($menus as $menu)
|
|
|
|
|
<x-button flat class="w-full justify-start px-4 py-3" :href="route($menu['route'])" label="{{ $menu['name'] }}" />
|
|
|
|
|
@endforeach
|
|
|
|
|
|
|
|
|
|
@auth
|
|
|
|
|
<x-button flat class="w-full justify-start px-4 py-3 text-red-600" label="登出" wire:click="logout" />
|
|
|
|
|
@endauth
|
2025-08-25 13:59:15 +08:00
|
|
|
</div>
|
2025-08-26 11:25:53 +08:00
|
|
|
</nav>
|
|
|
|
|
</div>
|
