170 lines
5.3 KiB
PHP
170 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SPK Gastritis</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body { font-family: 'Poppins', sans-serif; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-[#f4f8f6] to-[#eef5f1] text-gray-700">
|
|
|
|
<!-- MOBILE OVERLAY -->
|
|
<div id="overlay" class="fixed inset-0 bg-black/40 z-40 hidden md:hidden"></div>
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside id="sidebar"
|
|
class="fixed top-0 left-0 z-50 h-full w-72 bg-white border-r shadow transform -translate-x-full md:translate-x-0 transition-transform duration-300">
|
|
|
|
<!-- LOGO -->
|
|
<div class="px-6 py-6 border-b">
|
|
<h2 class="text-xl font-bold text-green-700">Gastro</h2>
|
|
</div>
|
|
|
|
<!-- MENU -->
|
|
<nav class="mt-4 space-y-2 px-4 text-sm">
|
|
|
|
<a href="{{ route('dashboard') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->routeIs('dashboard') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
<i class="ri-dashboard-line"></i> Dashboard
|
|
</a>
|
|
|
|
<a href="{{ url('/pasien') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->is('pasien*') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
<i class="ri-team-line"></i> Pasien
|
|
</a>
|
|
|
|
<a href="{{ url('/makanan') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->is('makanan*') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
<i class="ri-restaurant-line"></i> Makanan
|
|
</a>
|
|
|
|
<a href="{{ url('/proses_saw') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->is('proses_saw*') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
<i class="ri-calculator-line"></i> Proses SAW
|
|
</a>
|
|
|
|
<a href="{{ url('/laporan') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->is('laporan*') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
<i class="ri-file-chart-line"></i> Laporan
|
|
</a>
|
|
|
|
<!-- MANUAL BOOK -->
|
|
<a href="{{ route('panduan.index') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg
|
|
{{ request()->is('panduan*') ? 'bg-green-100 text-green-700 font-medium' : 'hover:bg-gray-100' }}">
|
|
|
|
<i class="ri-book-open-line"></i>
|
|
Panduan Penggunaan
|
|
|
|
</a>
|
|
|
|
</nav>
|
|
|
|
<!-- LOGOUT -->
|
|
<div class="absolute bottom-0 w-full p-4 border-t">
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
<button class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
<!-- MAIN -->
|
|
<div class="flex flex-col min-h-screen md:ml-72">
|
|
|
|
<!-- HEADER -->
|
|
<header class="bg-white border-b px-4 md:px-10 py-4 flex justify-between items-center">
|
|
|
|
<!-- BUTTON MOBILE -->
|
|
<button onclick="toggleSidebar()" class="md:hidden text-2xl">
|
|
<i class="ri-menu-line"></i>
|
|
</button>
|
|
|
|
<h1 class="text-lg md:text-2xl font-semibold text-gray-800">
|
|
@yield('title', 'Dashboard')
|
|
</h1>
|
|
|
|
<div class="relative hidden sm:block">
|
|
|
|
<button onclick="toggleProfileMenu()"
|
|
class="flex items-center gap-2 bg-green-50 px-4 py-2 rounded-full text-sm text-green-700 hover:bg-green-100 transition">
|
|
<i class="ri-user-3-line"></i>
|
|
{{ Auth::user()->username ?? 'Admin' }}
|
|
<i class="ri-arrow-down-s-line"></i>
|
|
</button>
|
|
|
|
<div id="profileMenu"
|
|
class="hidden absolute right-0 mt-4 w-80 bg-white border border-gray-200 rounded-3xl shadow-xl z-50 overflow-hidden">
|
|
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-xl font-bold text-gray-800">
|
|
{{ Auth::user()->username ?? 'Admin' }}
|
|
</h3>
|
|
|
|
<p class="text-gray-400 mt-1">
|
|
{{ Auth::user()->email ?? '-' }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<!-- CONTENT -->
|
|
<main class="p-4 sm:p-6 md:p-8 lg:p-10 flex-1 overflow-x-hidden">
|
|
@yield('content')
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<!-- SCRIPT -->
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
overlay.classList.toggle('hidden');
|
|
}
|
|
|
|
document.getElementById('overlay').addEventListener('click', () => {
|
|
toggleSidebar();
|
|
});
|
|
|
|
function toggleProfileMenu() {
|
|
const menu = document.getElementById('profileMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
document.addEventListener('click', function(e) {
|
|
const menu = document.getElementById('profileMenu');
|
|
const buttonArea = e.target.closest('.relative');
|
|
|
|
if (menu && !buttonArea) {
|
|
menu.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
</body>
|
|
</html> |