dish-planner/app
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

feature - 3 - Fix mobile menu

Browse source
This commit is contained in:
myrmidex 2026-01-04 02:50:42 +01:00
parent 89184b79a5
commit efa3f62146
1 changed files with 68 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
resources/views/components/layouts/app.blade.php
View file

@ -11,7 +11,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</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">
<!-- Navigation -->
<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>
<!-- Mobile menu button -->
<div class="-mr-2 flex items-center sm:hidden" x-data="{ open: false }">
<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">
<div class="-mr-2 flex items-center sm:hidden">
<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">
<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': !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="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<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>
</button>
</div>
</div>
</div>
</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 -->
<main>
{{ $slot }}