44 lines
2.1 KiB
PHP
44 lines
2.1 KiB
PHP
<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="flex flex-col h-full">
|
|
<div class="divide-y flex-1 overflow-y-auto">
|
|
@guest
|
|
<x-button flat class="w-full justify-start px-4 py-3" :href="route('login')" label="Log in / Register" />
|
|
@else
|
|
<div class="p-4 border-b">
|
|
<div class="flex items-center justify-between">
|
|
<div class="font-bold text-lg">超級巨星</div>
|
|
<div
|
|
class="inline-flex items-center px-2 py-1 text-sm font-medium text-gray-700"
|
|
x-data="{ name: '{{ auth()->user()->name }}' }"
|
|
x-text="name"
|
|
x-on:profile-updated.window="name = $event.detail.name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endguest
|
|
|
|
@foreach($menus as $menu)
|
|
<x-button flat class="w-full px-4 py-3 text-left {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}"
|
|
:href="route($menu['route'])"
|
|
label="{{ $menu['name'] }}"
|
|
/>
|
|
@endforeach
|
|
</div>
|
|
@auth
|
|
<div class="p-4 border-t">
|
|
<x-button flat class="w-full justify-start px-4 py-3 text-red-600" label="{{ __('Log Out') }}" wire:click="logout" />
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</nav>
|
|
</div> |