Search on Navigation Menu

<x-filament::input.wrapper class="px-4 my-4">
    <x-filament::input
        type="search"
        placeholder="Search navigation..."
        x-ref="search"
        x-data="sidebarSearch()"
        x-on:input.debounce.300ms="filterItems($event.target.value)"
        x-on:keydown.escape="clearSearch"
        x-on:keydown.meta.k.prevent.document="$refs.search.focus()"
    />
</x-filament::input.wrapper>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('sidebarSearch', () => ({
            init() {
                this.$refs.search.value = ''
            },

            filterItems(searchTerm) {
                const groups = document.querySelectorAll('.fi-sidebar-nav-groups .fi-sidebar-group')

                searchTerm = searchTerm.toLowerCase()

                groups.forEach(group => {
                    const items = group.querySelectorAll('.fi-sidebar-item')
                    let hasVisibleItems = false

                    items.forEach(item => {
                        const text = item.textContent.toLowerCase()
                        const isVisible = text.includes(searchTerm)

                        item.style.display = isVisible ? '' : 'none'

                        if (isVisible) {
                            hasVisibleItems = true
                        }
                    })

                    group.style.display = hasVisibleItems ? '' : 'none'
                })
            },

            clearSearch() {
                this.$refs.search.value = ''
                this.filterItems('')
            }
        }))
    })
</script>

$panel
            ->renderHook(PanelsRenderHook::SIDEBAR_NAV_START, fn () => view('filament.components.search')) // or where you located your blade file
...