Added search bar in pds

resources/views/components/navigation-filter.blade.php

@@ -0,0 +1,48 @@
+<div x-data="sidebarSearch()" class="px-2 py-2">
+    <x-filament::input.wrapper class="relative">
+        <x-filament::input
+            type="text"
+            placeholder="Search…"
+            x-ref="search"
+            x-on:input.debounce.300ms="filterItems($event.target.value)"
+            x-on:keydown.escape="clearSearch"
+            class="w-full rounded border px-2 py-1 text-sm"
+        />
+    </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 groupButton = group.querySelector('.fi-sidebar-group-button')
+                        const groupText = (groupButton?.textContent || '').toLowerCase()
+                        const items = group.querySelectorAll('.fi-sidebar-item')
+
+                        let hasVisibleItems = false
+                        const groupMatches = groupText.includes(searchTerm)
+
+                        items.forEach(item => {
+                            const itemText = item.textContent.toLowerCase()
+                            const isVisible = itemText.includes(searchTerm) || groupMatches
+                            item.style.display = isVisible ? '' : 'none'
+                            if (isVisible) hasVisibleItems = true
+                        })
+
+                        group.style.display = (hasVisibleItems || groupMatches) ? '' : 'none'
+                    })
+                },
+                clearSearch() {
+                    this.$refs.search.value = ''
+                    this.filterItems('')
+                },
+            }))
+        })
+    </script>
+</div>