166 lines
7.6 KiB
PHP
166 lines
7.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title', 'SiPakarTebu')</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
body { font-family: 'DM Sans', sans-serif; background: #f8f4ee; }
|
|
|
|
.sidebar-active {
|
|
background: linear-gradient(135deg, #40916c, #2d6a4f) !important;
|
|
box-shadow: 0 4px 12px rgba(64,145,108,.3);
|
|
}
|
|
|
|
.sidebar-item:hover {
|
|
background: rgba(255,255,255,.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-[#f8f4ee]">
|
|
|
|
<div class="flex min-h-screen">
|
|
|
|
<!-- OVERLAY -->
|
|
<div id="overlay"
|
|
class="fixed inset-0 bg-black/40 z-40 hidden md:hidden"
|
|
onclick="toggleSidebar()"></div>
|
|
|
|
<!-- SIDEBAR -->
|
|
<div id="sidebar"
|
|
class="fixed md:sticky md:top-0 md:h-screen z-50 w-64 min-h-screen overflow-y-auto text-white transform -translate-x-full md:translate-x-0 transition duration-300 flex-shrink-0"
|
|
style="background: linear-gradient(180deg, #1a3a2a 0%, #1f4a35 60%, #1a3a2a 100%);">
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center space-x-3 mb-8 pb-6 border-b border-white/10">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
|
|
style="background:linear-gradient(135deg,#40916c,#74c69d);">
|
|
<svg width="26" height="26" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Daun tebu -->
|
|
<ellipse cx="11" cy="15" rx="5" ry="11" fill="rgba(255,255,255,0.25)" stroke="white" stroke-width="1.3" transform="rotate(-15 11 15)"/>
|
|
<line x1="11" y1="6" x2="10" y2="24" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.8" transform="rotate(-15 11 15)"/>
|
|
<line x1="10" y1="13" x2="7" y2="17" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="10" y1="17" x2="7.5" y2="21" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Stetoskop -->
|
|
<path d="M19 7 C19 7 24 7 24 12 C24 17 20 18 20 22" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
|
|
<circle cx="20" cy="24.5" r="3" stroke="white" stroke-width="1.3" fill="rgba(255,255,255,0.2)"/>
|
|
<line x1="18" y1="7" x2="21" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-xl font-bold" style="font-family:'Playfair Display',serif;">SiPakarTebu</h1>
|
|
</div>
|
|
|
|
<nav class="space-y-1">
|
|
<a href="{{ route('dashboard') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('dashboard') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-home"></i><span>Dashboard</span>
|
|
</a>
|
|
|
|
<a href="{{ route('diagnosis.create') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('diagnosis.*') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-stethoscope"></i><span>Diagnosa</span>
|
|
</a>
|
|
|
|
<a href="{{ route('history') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('history') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-history"></i><span>Riwayat</span>
|
|
</a>
|
|
|
|
<a href="{{ route('diseases.index') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('diseases.*') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-book-medical"></i><span>Kamus</span>
|
|
</a>
|
|
|
|
<a href="{{ route('profile') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('profile') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-user"></i><span>Profil</span>
|
|
</a>
|
|
|
|
@if(auth()->user()->role === 'admin')
|
|
<a href="{{ route('users.index') }}" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl {{ request()->routeIs('users.*') ? 'sidebar-active' : '' }}">
|
|
<i class="fas fa-users"></i><span>Users</span>
|
|
</a>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="sidebar-item flex items-center space-x-3 p-3 rounded-xl w-full text-left">
|
|
<i class="fas fa-sign-out-alt"></i><span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAIN -->
|
|
<div class="flex-1 flex flex-col">
|
|
|
|
<!-- HEADER -->
|
|
<div class="bg-white p-4 md:p-6 flex justify-between items-center border-b">
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="toggleSidebar()" class="md:hidden text-xl">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<h2 class="text-lg md:text-2xl font-bold"
|
|
style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
@yield('page-title')
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
<!-- Tombol Notifikasi -->
|
|
<a href="{{ route('notifications') }}" class="relative flex items-center justify-center w-9 h-9 rounded-full transition"
|
|
style="background:#f0fdf4;color:#2d6a4f;"
|
|
onmouseover="this.style.background='#d8f3dc'" onmouseout="this.style.background='#f0fdf4'">
|
|
<i class="fas fa-bell text-sm"></i>
|
|
@php
|
|
$unreadCount = auth()->user()->notifications()->where('is_read', false)->count();
|
|
@endphp
|
|
@if($unreadCount > 0)
|
|
<span class="absolute -top-1 -right-1 w-4 h-4 rounded-full text-white flex items-center justify-center"
|
|
style="background:#dc2626;font-size:.6rem;font-weight:700;">
|
|
{{ $unreadCount > 9 ? '9+' : $unreadCount }}
|
|
</span>
|
|
@endif
|
|
</a>
|
|
|
|
<!-- Tombol Profil -->
|
|
<a href="{{ route('profile') }}" class="flex items-center gap-2">
|
|
@if(auth()->user()->photo)
|
|
<img src="{{ url('storage/' . auth()->user()->photo) }}"
|
|
class="w-9 h-9 rounded-full object-cover border-2"
|
|
style="border-color:#b7ddc4;">
|
|
@else
|
|
<div class="w-9 h-9 rounded-full text-white flex items-center justify-center text-sm font-bold"
|
|
style="background:linear-gradient(135deg,#40916c,#2d6a4f);">
|
|
{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
|
|
</div>
|
|
@endif
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<div class="p-4 md:p-6">
|
|
@yield('content')
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('-translate-x-full');
|
|
document.getElementById('overlay').classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
|
|
@stack('scripts')
|
|
|
|
</body>
|
|
</html> |