220 lines
10 KiB
PHP
220 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<!-- Scripts -->
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
|
|
<style>
|
|
.bg-maroon {
|
|
background-color: #8B0000;
|
|
}
|
|
.text-maroon {
|
|
color: #8B0000;
|
|
}
|
|
.hover\:bg-maroon:hover {
|
|
background-color: #a00000;
|
|
}
|
|
#mainContent {
|
|
transition: margin-left 0.3s ease-in-out;
|
|
}
|
|
.sidebar-open {
|
|
margin-left: 16rem;
|
|
}
|
|
.sidebar-closed {
|
|
margin-left: 0;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.sidebar-open {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@stack('styles')
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
<div class="min-h-screen bg-[#f8f0f0]">
|
|
<!-- Navbar -->
|
|
<nav class="bg-maroon fixed w-full z-50">
|
|
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-start rtl:justify-end">
|
|
<button id="toggleSidebar" type="button" class="inline-flex items-center p-2 text-sm text-white rounded-lg hover:bg-maroon focus:outline-none focus:ring-2 focus:ring-gray-200">
|
|
<span class="sr-only">Toggle sidebar</span>
|
|
<i class="fas fa-bars w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 text-center">
|
|
<h1 class="text-xl font-bold text-white">Hi {{ Auth::user()->name }}</h1>
|
|
<p class="text-sm text-white">Welcome to Legacy Eatery & Space</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
@if(Auth::check())
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open" class="flex items-center bg-white hover:bg-gray-100 p-1 rounded-full transition duration-300">
|
|
@if(Auth::user()->profile_picture)
|
|
<img class="h-10 w-10 rounded-full object-cover"
|
|
src="{{ Storage::url(Auth::user()->profile_picture) }}"
|
|
alt="{{ Auth::user()->name }}">
|
|
@else
|
|
<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
|
|
<i class="fas fa-user text-gray-400"></i>
|
|
</div>
|
|
@endif
|
|
</button>
|
|
|
|
<!-- Dropdown menu -->
|
|
<div x-show="open"
|
|
@click.away="open = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
|
|
<div class="py-1">
|
|
<a href="{{ route('user.profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
<i class="fas fa-user-circle mr-2"></i>Edit Profil
|
|
</a>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
<i class="fas fa-sign-out-alt mr-2"></i>Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}" class="bg-white hover:bg-gray-100 px-4 py-2 rounded-lg flex items-center transition duration-300">
|
|
<i class="fas fa-sign-in-alt mr-2 text-maroon"></i>
|
|
<span class="text-maroon">Login</span>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200" aria-label="Sidebar">
|
|
<div class="h-full px-3 pb-4 overflow-y-auto bg-white">
|
|
<ul class="space-y-2 font-medium">
|
|
<li>
|
|
<a href="/dashboard" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-home w-5 h-5"></i>
|
|
<span class="ms-3">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/menu" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-utensils w-5 h-5"></i>
|
|
<span class="ms-3">Daftar Menu</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/meja" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-chair w-5 h-5"></i>
|
|
<span class="ms-3">Daftar Meja</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/reservasi" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-calendar-check w-5 h-5"></i>
|
|
<span class="ms-3">Reservasi</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/transaksi" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-cash-register w-5 h-5"></i>
|
|
<span class="ms-3">Transaksi</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/riwayat" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-history w-5 h-5"></i>
|
|
<span class="ms-3">Riwayat Pesanan</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/kritiksaran" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
|
|
<i class="fas fa-comments w-5 h-5"></i>
|
|
<span class="ms-3">Kritik Saran</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main id="mainContent" class="pt-20">
|
|
@yield('content')
|
|
</main>
|
|
</div>
|
|
|
|
@stack('scripts')
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const mainContent = document.getElementById('mainContent');
|
|
const toggleButton = document.getElementById('toggleSidebar');
|
|
let isSidebarOpen = window.innerWidth >= 640;
|
|
|
|
function updateSidebarState() {
|
|
if (isSidebarOpen) {
|
|
sidebar.classList.remove('-translate-x-full');
|
|
mainContent.classList.add('sidebar-open');
|
|
mainContent.classList.remove('sidebar-closed');
|
|
} else {
|
|
sidebar.classList.add('-translate-x-full');
|
|
mainContent.classList.remove('sidebar-open');
|
|
mainContent.classList.add('sidebar-closed');
|
|
}
|
|
}
|
|
|
|
// Initial state
|
|
updateSidebarState();
|
|
|
|
// Toggle button click
|
|
toggleButton.addEventListener('click', function() {
|
|
isSidebarOpen = !isSidebarOpen;
|
|
updateSidebarState();
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth < 640) {
|
|
isSidebarOpen = false;
|
|
}
|
|
updateSidebarState();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|