Reservasi-Cafe/resources/views/layouts/admin/app.blade.php

88 lines
2.8 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legacy Cafe</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Add your custom styles here */
.modal {
transition: opacity 0.25s ease;
}
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<!-- Sidebar -->
@include('layouts.admin.sidebar')
<!-- Main Content -->
<div class="ml-64">
<!-- Mobile Toggle Button -->
<div class="md:hidden fixed top-4 left-4 z-50">
<button type="button" class="text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#8B0000]" id="mobile-sidebar-toggle">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Page Content -->
<main class="py-4 px-8">
@yield('content')
</main>
</div>
<!-- Scripts Stack -->
@stack('scripts')
<script>
// Global AJAX setup for CSRF token
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Mobile sidebar toggle
document.addEventListener('DOMContentLoaded', function() {
const sidebarToggle = document.getElementById('mobile-sidebar-toggle');
const sidebar = document.querySelector('.fixed.inset-y-0');
if (sidebarToggle && sidebar) {
sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('-translate-x-full');
});
}
// Dropdown functionality
const dropdownButton = document.getElementById('dropdownDefaultButton');
const dropdownMenu = document.getElementById('dropdown');
if (dropdownButton && dropdownMenu) {
dropdownButton.addEventListener('click', function() {
dropdownMenu.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.classList.add('hidden');
}
});
}
});
</script>
</body>
</html>