m
This commit is contained in:
antv
@@ -1,11 +1,13 @@
|
||||
@props(['active' => false])
|
||||
|
||||
<aside class="sidebar flex flex-col justify-between h-screen w-60 bg-white border-r border-gray-100 shadow-sm transition-all duration-300 shrink-0 overflow-hidden fixed inset-y-0 left-0 z-40 -translate-x-full lg:sticky lg:top-0 lg:translate-x-0" aria-label="Main navigation">
|
||||
<div class="p-6 flex items-center justify-between shrink-0">
|
||||
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-6 w-auto object-contain">
|
||||
<aside class="sidebar flex flex-col justify-between h-screen w-[85vw] max-w-[280px] lg:w-64 bg-white border-r border-gray-100 shadow-sm transition-transform duration-200 shrink-0 overflow-hidden fixed inset-y-0 left-0 z-40 -translate-x-full lg:sticky lg:top-0 lg:translate-x-0" aria-label="Main navigation">
|
||||
<div class="px-5 py-6 flex items-center justify-between shrink-0">
|
||||
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-4 lg:h-5 w-auto object-contain">
|
||||
<!-- Mobile hamburger button/close -->
|
||||
<button id="sidebar-close" class="lg:hidden p-2 text-gray-500 hover:bg-gray-100 rounded-md focus:outline-none" aria-label="Close navigation">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
<button id="sidebar-close" type="button" class="lg:hidden w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-[#F3F5F9] active:scale-95 focus-visible:ring-2 focus-visible:ring-primary transition duration-200 cursor-pointer" aria-label="Đóng menu">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</script>
|
||||
<div class="app-layout">
|
||||
<!-- Mobile overlay (click outside to close) -->
|
||||
<div id="sidebar-overlay" class="fixed inset-0 bg-black/30 hidden" aria-hidden="true"></div>
|
||||
<div id="sidebar-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm hidden transition-opacity duration-200" aria-hidden="true"></div>
|
||||
<!-- Sidebar Component -->
|
||||
<x-sidebar />
|
||||
|
||||
@@ -121,12 +121,17 @@
|
||||
function openSidebar() {
|
||||
sidebar.classList.remove('-translate-x-full');
|
||||
overlay.classList.remove('hidden');
|
||||
overlay.classList.add('opacity-100');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
sidebar.classList.add('-translate-x-full');
|
||||
overlay.classList.remove('opacity-100');
|
||||
// after transition, hide overlay
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 200);
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
@@ -140,6 +145,12 @@
|
||||
});
|
||||
closeBtn.addEventListener('click', closeSidebar);
|
||||
overlay.addEventListener('click', closeSidebar);
|
||||
// ESC key to close sidebar
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
|
||||
closeSidebar();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Client-side flash message support
|
||||
|
||||
@@ -13,6 +13,20 @@
|
||||
<img src="{{ asset('images/illustrations/trophy.svg') }}" alt="trophy" class="absolute right-4 bottom-0 w-40 h-40 md:w-56 md:h-56 opacity-20 pointer-events-none">
|
||||
</div>
|
||||
|
||||
<!-- Month Filter -->
|
||||
<div class="flex justify-start mb-8">
|
||||
<form method="GET" class="flex items-center gap-4 bg-white p-3 md:p-4 pr-6 rounded-[24px] shadow-[0_4px_12px_rgba(0,0,0,0.03)] border border-gray-100 transition-all hover:shadow-md">
|
||||
<div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-[#3462f7]">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<label for="month" class="block text-xs font-extrabold text-gray-400 uppercase tracking-wider mb-1">Lọc theo tháng</label>
|
||||
<input type="month" id="month" name="month" class="block w-full border-0 bg-transparent p-0 text-lg font-bold text-[#1a2b49] focus:ring-0 cursor-pointer" value="{{ $selectedMonth }}" onchange="this.form.submit()" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-10">
|
||||
<div class="inline-flex bg-[#F5F7FB] rounded-[20px] p-1.5 shadow-inner border border-gray-100">
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Load More Container -->
|
||||
<div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
|
||||
<div id="loadMoreContainer" class="flex justify-center {{ $hasMore ? '' : 'hidden' }}" style="margin-top: 64px; margin-bottom: 32px;">
|
||||
<button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
|
||||
<span id="btnText">Xem thêm</span>
|
||||
<span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Load More Container -->
|
||||
<div id="loadMoreContainer" class="flex justify-center mt-16 {{ $hasMore ? '' : 'hidden' }}">
|
||||
<div id="loadMoreContainer" class="flex justify-center {{ $hasMore ? '' : 'hidden' }}" style="margin-top: 64px; margin-bottom: 32px;">
|
||||
<button id="loadMoreBtn" class="px-8 py-3 bg-[#3462f7] hover:bg-[#254edb] text-white font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 cursor-pointer">
|
||||
<span id="btnText">Xem thêm</span>
|
||||
<span id="btnSpinner" class="hidden animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></span>
|
||||
|
||||
Reference in New Issue
Block a user