Azad Furkan ŞAKAR Comments

I know, but thank you for the information. I will take it into consideration 🙏🏼 The problem was independent of FilamentPHP anyway. I just thought if there is someone knowledgeable on the server side, they could enlighten me.

10 replies

FFilament

•Created by Azad Furkan ŞAKAR on 3/31/2025 in #❓┊help

Nginx - Auth Request

Isn't that why we use the non-filament label/tag, or am I wrong? 🥲 If so, please excuse me. Also, this is exactly what I was trying to do but I had a problem on the Nginx side and I was wondering if anyone had a similar problem.

10 replies

FFilament

•Created by Arre on 3/26/2025 in #❓┊help

The Notification icon has disappeared...

https://filamentphp.com/docs/3.x/notifications/database-notifications

4 replies

FFilament

•Created by marsep95 on 5/6/2024 in #❓┊help

Search on Navigation Menu

Your very welcome! 🙏🏼

12 replies

FFilament

•Created by marsep95 on 5/6/2024 in #❓┊help

Search on Navigation Menu

12 replies

FFilament

•Created by marsep95 on 5/6/2024 in #❓┊help

Search on Navigation Menu

Here yo go;

<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>

<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>

and register your admin panel provider;

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

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