From d56ee5ed61c4fd4f312068f8d8c4ed3147043d31 Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Thu, 30 Oct 2025 13:55:31 +0530
Subject: [PATCH] Added search bar in pds

---
 .../components/navigation-filter.blade.php    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 resources/views/components/navigation-filter.blade.php

diff --git a/resources/views/components/navigation-filter.blade.php b/resources/views/components/navigation-filter.blade.php
new file mode 100644
index 0000000..6ea2c63
--- /dev/null
+++ b/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>