netgescon-day0/resources/views/filament/components/sidebar-search.blade.php

63 lines
2.6 KiB
PHP

<div class="px-4 py-2 border-b border-gray-100 dark:border-gray-800/60 mb-2">
<div class="relative">
<input
type="text"
id="sidebar-menu-search"
placeholder="Cerca menù..."
class="w-full text-xs rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 px-3 py-1.5 focus:border-amber-400 focus:ring-1 focus:ring-amber-400 focus:outline-none dark:text-gray-100 shadow-sm transition-all"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const searchInput = document.getElementById('sidebar-menu-search');
if (!searchInput) return;
// Trova il contenitore navigazione della sidebar per memorizzare e gestire lo scroll
const sidebarNav = document.querySelector('.fi-sidebar-nav');
searchInput.addEventListener('input', function (e) {
const query = e.target.value.toLowerCase().trim();
// Salva la posizione dello scroll prima del filtro
const scrollPos = sidebarNav ? sidebarNav.scrollTop : 0;
// Seleziona tutti i gruppi di navigazione di Filament
const groups = document.querySelectorAll('.fi-sidebar-group');
groups.forEach(group => {
const items = group.querySelectorAll('.fi-sidebar-item');
let hasVisibleItems = false;
items.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(query)) {
item.style.display = '';
hasVisibleItems = true;
} else {
item.style.display = 'none';
}
});
// Se il gruppo non ha voci visibili (e c'è una query attiva), nascondi l'intero gruppo
if (query !== '' && !hasVisibleItems) {
group.style.display = 'none';
} else {
group.style.display = '';
}
});
// Ripristina lo scroll per impedire alla sidebar di saltare
if (sidebarNav) {
sidebarNav.scrollTop = scrollPos;
}
});
});
</script>