81 lines
4.3 KiB
PHP
81 lines
4.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>@yield('title', 'Dashboard Anggota') - Sarakata</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: {
|
|
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
|
colors: {
|
|
primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' },
|
|
}
|
|
}}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans antialiased flex flex-col h-screen overflow-hidden">
|
|
|
|
{{-- TOP HEADER --}}
|
|
<header class="bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 text-white h-16 flex items-center justify-between px-6 shadow-lg z-20">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 bg-white/15 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
|
<i class="fas fa-book-open text-lg"></i>
|
|
</div>
|
|
<h1 class="text-base font-bold tracking-wide">SARAKATA <span class="font-normal text-primary-200 hidden sm:inline">— Dashboard Anggota</span></h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 transition text-sm font-medium">
|
|
<i class="fas fa-sign-out-alt text-xs"></i> Logout
|
|
</button>
|
|
</form>
|
|
<div class="w-9 h-9 rounded-xl overflow-hidden border-2 border-white/30">
|
|
<img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'User' }}&background=6366f1&color=fff" class="w-full h-full object-cover">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex flex-1 overflow-hidden">
|
|
{{-- SIDEBAR --}}
|
|
<aside class="w-64 bg-white shadow-xl flex-col overflow-y-auto z-10 border-r border-gray-100 hidden md:flex">
|
|
<div class="flex flex-col items-center py-8 border-b border-gray-100 px-4">
|
|
<div class="w-20 h-20 rounded-2xl overflow-hidden border-4 border-primary-100 shadow-lg shadow-primary-100">
|
|
<img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'User' }}&background=6366f1&color=fff&size=128" class="w-full h-full object-cover">
|
|
</div>
|
|
<h2 class="mt-4 font-bold text-gray-800 text-lg">{{ auth()->user()->name ?? 'User' }}</h2>
|
|
<span class="px-3 py-1 mt-1.5 text-[10px] font-bold text-primary-700 bg-primary-50 rounded-full uppercase tracking-wider">Anggota</span>
|
|
</div>
|
|
|
|
<nav class="flex-1 py-6 space-y-1 px-3">
|
|
<a href="{{ route('user.dashboard') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('user.dashboard') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-th-large w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Dashboard</span>
|
|
</a>
|
|
|
|
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl text-gray-300 cursor-not-allowed mb-1" title="Coming Soon">
|
|
<i class="fas fa-history w-5 text-center"></i>
|
|
<span class="text-sm">Riwayat Peminjaman</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
{{-- CONTENT --}}
|
|
<main class="flex-1 overflow-y-auto bg-gray-50 p-8">
|
|
@yield('content')
|
|
</main>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|