novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI premium polish

Browse Source 
- Sidebar: gradient blue tint background + subtle shadow
- Sidebar nav: active indicator gradient, border-left glow
- Halaman: fade-in animation tiap navigasi
- Stat cards: hover lift + shadow glow (stat-card-glow)
- Transisi halus di semua elemen interaktif
This commit is contained in:
Bro
2026-07-24 18:15:25 +07:00
parent 5df740fcf8
commit f393f79ec0
3 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/nav-item.blade.php
+4 -4
View File
@@ -3,8 +3,8 @@
@php
$isActive = $active ?? request()->fullUrlIs($href) || request()->is(trim(parse_url($href, PHP_URL_PATH) ?? '', '/'));
$classes = $isActive
? 'bg-blue-50 text-blue-700 border-r-2 border-blue-500'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900';
? 'bg-gradient-to-r from-blue-50 to-white text-blue-700 border-l-[3px] border-blue-500 shadow-sm'
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-100/70 border-l-[3px] border-transparent';
$faIcons = [
'home' => 'fa-solid fa-house',
@@ -26,7 +26,7 @@ $faIcons = [
$faClass = $faIcons[$icon] ?? 'fa-solid fa-circle';
@endphp
<a href="{{ $href }}" {{ $attributes->merge(['class' => 'group flex items-center px-3 py-2 text-sm font-medium rounded-md ' . $classes]) }}>
<i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0"></i>
<a href="{{ $href }}" {{ $attributes->merge(['class' => 'group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-150 ' . $classes]) }}>
<i class="{{ $faClass }} mr-3 w-5 text-center text-sm flex-shrink-0 {{ $isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600' }}"></i>
{{ $slot }}
</a>
resources/views/dashboard/index.blade.php
+4 -4
View File
@@ -12,7 +12,7 @@
{{-- Gradient Stats Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i>
</div>
@@ -22,7 +22,7 @@
<p class="text-[10px] text-white/50 mt-0.5">data terbaru</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-list-check text-white text-6xl"></i>
</div>
@@ -32,7 +32,7 @@
<p class="text-[10px] text-white/50 mt-0.5">semua waktu</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-users text-white text-6xl"></i>
</div>
@@ -42,7 +42,7 @@
<p class="text-[10px] text-white/50 mt-0.5">terdata</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-file-lines text-white text-6xl"></i>
</div>
resources/views/layouts/app.blade.php
+10 -2
View File
@@ -33,12 +33,20 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.3s ease-out; }
.stat-card-glow:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-1px); }
</style>
@stack('styles')
</head>
<body class="h-full antialiased">
<div x-data="notifications()" class="min-h-screen flex">
{{-- Sidebar --}}
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-auto transition-transform duration-200 ease-in-out flex flex-col">
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-gradient-to-b from-white via-blue-50/30 to-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-auto transition-transform duration-200 ease-in-out flex flex-col shadow-sm">
<div class="flex items-start justify-between h-auto px-4 pt-4 pb-3 border-b border-gray-200">
<a href="{{ route('dashboard') }}" class="min-w-0">
<div class="flex items-center gap-2.5 mb-2">
@@ -228,7 +236,7 @@
</header>
{{-- Page Content --}}
<main class="flex-1 p-4 lg:p-6">
<main class="flex-1 p-4 lg:p-6 animate-fade-in">
@if (session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center justify-between">
<span>{{ session('success') }}</span>