feature - 3 - Fix mobile menu
This commit is contained in:
parent
89184b79a5
commit
efa3f62146
1 changed files with 68 additions and 5 deletions
|
|
@ -11,7 +11,7 @@
|
||||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
@livewireStyles
|
@livewireStyles
|
||||||
</head>
|
</head>
|
||||||
<body class="font-sans antialiased bg-gray-600 text-gray-100">
|
<body class="font-sans antialiased bg-gray-600 text-gray-100" x-data="{ mobileMenuOpen: false }">
|
||||||
<div class="min-h-screen">
|
<div class="min-h-screen">
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="border-b-2 border-secondary shadow-sm z-50 mb-8 bg-gray-700">
|
<nav class="border-b-2 border-secondary shadow-sm z-50 mb-8 bg-gray-700">
|
||||||
|
|
@ -82,18 +82,81 @@ class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-gray-
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<div class="-mr-2 flex items-center sm:hidden" x-data="{ open: false }">
|
<div class="-mr-2 flex items-center sm:hidden">
|
||||||
<button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-100 hover:text-accent-blue hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-accent-blue transition">
|
<button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-gray-100 hover:text-accent-blue hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-accent-blue transition">
|
||||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||||
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
<path :class="{'hidden': mobileMenuOpen, 'inline-flex': !mobileMenuOpen }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
<path :class="{'hidden': !mobileMenuOpen, 'inline-flex': mobileMenuOpen }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- Mobile menu (full screen overlay) -->
|
||||||
|
<div x-show="mobileMenuOpen"
|
||||||
|
x-cloak
|
||||||
|
x-transition:enter="transition ease-out duration-200"
|
||||||
|
x-transition:enter-start="opacity-0"
|
||||||
|
x-transition:enter-end="opacity-100"
|
||||||
|
x-transition:leave="transition ease-in duration-150"
|
||||||
|
x-transition:leave-start="opacity-100"
|
||||||
|
x-transition:leave-end="opacity-0"
|
||||||
|
class="sm:hidden fixed inset-0 z-50 bg-gray-700">
|
||||||
|
|
||||||
|
<!-- Close button -->
|
||||||
|
<div class="flex justify-end p-4">
|
||||||
|
<button @click="mobileMenuOpen = false" class="p-2 text-gray-100 hover:text-accent-blue">
|
||||||
|
<svg class="h-8 w-8" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Menu content -->
|
||||||
|
<div class="flex flex-col items-center justify-center h-full -mt-16">
|
||||||
|
@auth
|
||||||
|
<div class="space-y-6 text-center">
|
||||||
|
<a href="{{ route('dashboard') }}"
|
||||||
|
class="block text-2xl font-medium {{ request()->routeIs('dashboard') ? 'text-accent-blue' : 'text-gray-100' }}">
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<a href="{{ route('users.index') }}"
|
||||||
|
class="block text-2xl font-medium {{ request()->routeIs('users.*') ? 'text-accent-blue' : 'text-gray-100' }}">
|
||||||
|
Users
|
||||||
|
</a>
|
||||||
|
<a href="{{ route('dishes.index') }}"
|
||||||
|
class="block text-2xl font-medium {{ request()->routeIs('dishes.*') ? 'text-accent-blue' : 'text-gray-100' }}">
|
||||||
|
Dishes
|
||||||
|
</a>
|
||||||
|
<a href="{{ route('schedule.index') }}"
|
||||||
|
class="block text-2xl font-medium {{ request()->routeIs('schedule.*') ? 'text-accent-blue' : 'text-gray-100' }}">
|
||||||
|
Schedule
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 pt-6 border-t border-secondary text-center">
|
||||||
|
<div class="text-gray-300 mb-4">{{ Auth::user()->name }}</div>
|
||||||
|
<form method="POST" action="{{ route('logout') }}">
|
||||||
|
@csrf
|
||||||
|
<button type="submit" class="text-xl text-danger">
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<div class="space-y-6 text-center">
|
||||||
|
<a href="{{ route('login') }}" class="block text-2xl font-medium text-accent-blue">Login</a>
|
||||||
|
@if (Route::has('register'))
|
||||||
|
<a href="{{ route('register') }}" class="block text-2xl font-medium text-accent-blue">Register</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
@endauth
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Page Content -->
|
<!-- Page Content -->
|
||||||
<main>
|
<main>
|
||||||
{{ $slot }}
|
{{ $slot }}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue