bao/portal-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
pbao9
2026-02-10 16:49:59 +07:00
parent 057353a2e1
commit 3ece85430c
6 changed files with 254 additions and 11514 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/siderbar-user.blade.php
+45 -64
View File
@@ -1,86 +1,68 @@
<div x-data="{ open: false }" class="relative">
<!-- Toggle button for mobile (sm and below) -->
<button
@click="open = true"
<button @click="open = true"
class="md:hidden fixed top-4 left-4 z-50 flex items-center px-3 py-2 bg-primary text-white rounded shadow-lg focus:outline-none"
type="button"
aria-label="{{ __('Open menu') }}">
type="button" aria-label="{{ __('Open menu') }}">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
<!-- Sidebar: always visible on md+, offcanvas on sm -->
<aside
id="drawer-navigation"
aria-label="Sidenav"
aria-hidden="true"
:class="{
'fixed inset-0 z-40 flex md:hidden bg-black/40': open,
'hidden md:block': !open,
'md:static md:inset-auto md:z-auto md:flex md:bg-transparent': true
}"
x-show="open || window.innerWidth >= 768"
@keydown.window.escape="open = false"
@click.self="open = false"
x-cloak
>
<div class="flex flex-col h-full overflow-y-auto py-5 pl-3 pr-1 scrollbar-hide bg-white/90 md:bg-transparent md:shadow-none w-64 md:w-auto">
<!-- Close button for mobile -->
<button
@click="open = false"
<aside id="drawer-navigation" aria-label="Sidenav" aria-hidden="true" :class="{
'fixed inset-0 z-40 flex md:hidden bg-black/40': open,
'hidden md:block': !open,
'md:static md:inset-auto md:z-auto md:flex md:bg-transparent': true
}" x-show="open || window.innerWidth >= 768" @keydown.window.escape="open = false"
@click.self="open = false" x-cloak>
<div
class="flex flex-col h-full overflow-y-auto py-5 pl-3 pr-1 scrollbar-hide bg-white/90 md:bg-transparent md:shadow-none w-64 md:w-auto">
<button @click="open = false"
class="md:hidden mb-4 ml-auto flex items-center px-2 py-1 text-gray-700 hover:text-primary focus:outline-none"
aria-label="{{ __('Close menu') }}">
<i data-lucide="x" class="w-6 h-6"></i>
</button>
<ul x-data="{ visibleItems: [], showAll: true }" x-init="if (showAll) {
let total = {{ count($menu) }};
for (let i = 0; i < total; i++) {
setTimeout(() => visibleItems.push(i), i * 100);
}
}" class="space-y-2">
let total = {{ count($menu) }};
for (let i = 0; i < total; i++) {
setTimeout(() => visibleItems.push(i), i * 100);
}
}" class="space-y-2">
@foreach ($menu as $index => $item)
@php
$isActive = request()->routeIs($item['route_name']);
@endphp
<li x-show="visibleItems.includes({{ $index }})"
x-transition:enter="transition ease-out duration-300"
<li x-show="visibleItems.includes({{ $index }})" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-x-5"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 -translate-x-5" x-cloak
x-data="{ open: {{ $isActive ? 'true' : 'false' }} }"
wire:key="menu-item-{{ $index }}">
x-data="{ open: {{ $isActive ? 'true' : 'false' }} }" wire:key="menu-item-{{ $index }}">
{{-- Nếu có submenu --}}
@if (count($item['children'] ?? []) > 0)
<button @click="open = !open" type="button"
class="relative flex items-center pl-3 py-3 pr-2 text-base font-medium text-white rounded-lg overflow-hidden w-full
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700 cursor-pointer
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : '' }}">
class="relative flex items-center pl-3 py-3 pr-2 text-base font-medium text-white rounded-lg overflow-hidden w-full
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700 cursor-pointer
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : '' }}">
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
<i data-lucide="{{ $item['icon'] }}"></i>
</span>
<span class="relative z-10 ml-3 text-white text-[.875rem]">{{ __($item['title']) }}</span>
<i data-lucide="chevron-down"
class="w-4 h-4 ml-auto transition-transform duration-300 transform"
:class="{ 'rotate-180': open }"></i>
class="w-4 h-4 ml-auto transition-transform duration-300 transform"
:class="{ 'rotate-180': open }"></i>
</button>
{{-- Sub menu items --}}
<ul x-show="open" x-cloak x-data="{ visibleSubItems: [] }" x-init="$watch('open', (val) => {
if (val) {
visibleSubItems = [];
setTimeout(() => {
@foreach($item['children'] as $i => $subItem)
setTimeout(() => visibleSubItems.push({{ $i }}), {{ $i * 80 }});
@endforeach
}, 50);
} else {
visibleSubItems = [];
}
})"
class="pl-6 mt-1 space-y-1 bg-white/10 rounded-lg">
if (val) {
visibleSubItems = [];
setTimeout(() => {
@foreach($item['children'] as $i => $subItem)
setTimeout(() => visibleSubItems.push({{ $i }}), {{ $i * 80 }});
@endforeach
}, 50);
} else {
visibleSubItems = [];
}
})" class="pl-6 mt-1 space-y-1 bg-white/10 rounded-lg">
@foreach ($item['children'] as $i => $subItem)
@if (empty($subItem['roles']) || auth()->guard('admin')->user()?->rolesIn($subItem['roles']))
<li x-show="visibleSubItems.includes({{ $i }})"
@@ -91,10 +73,9 @@
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 -translate-x-4" x-cloak>
<a href="{{ !empty($subItem['route_name']) ? route($subItem['route_name']) : url($subItem['slug'] ?? '#') }}"
class="relative flex items-center p-2 text-sm font-medium text-white/90 rounded-lg overflow-hidden
hover:text-white dark:hover:bg-gray-700 transition-transform transform hover:translate-x-1">
<span
class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
class="relative flex items-center p-2 text-sm font-medium text-white/90 rounded-lg overflow-hidden
hover:text-white dark:hover:bg-gray-700 transition-transform transform hover:translate-x-1">
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
<i data-lucide="{{ $subItem['icon'] }}"></i>
</span>
<span class="relative z-10 ml-3 truncate">{{ __($subItem['title']) }}</span>
@@ -104,14 +85,14 @@
@endforeach
</ul>
@else
{{-- Không có submenu --}}
<a href="{{ !empty($item['route_name']) ? route($item['route_name']) : url($item['slug'] ?? '#') }}"
class="relative flex items-center p-3 text-base font-medium rounded-lg overflow-hidden
cursor-pointer
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : 'text-white' }}
">
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
class="relative flex items-center p-3 text-base font-medium rounded-lg overflow-hidden
cursor-pointer
hover:bg-white/30 dark:text-white dark:hover:bg-gray-700
{{ $isActive ? 'bg-primary-light/80 shadow-lg before:content-[\'\'] before:absolute before:inset-0 before:rounded-lg before:border-b-[3px] before:border-solid before:border-black/10 before:bg-white/10' : 'text-white' }}
">
<span class="relative z-10 flex-shrink-0 w-6 h-6 text-white dark:text-gray-400">
<i data-lucide="{{ $item['icon'] }}"></i>
</span>
<span
@@ -123,4 +104,4 @@
</ul>
</div>
</aside>
</div>
</div>