wip

Author: atmonshi

app/Providers/Filament/AdminPanelProvider.php

@@ -275,7 +275,9 @@ public function panel(Panel $panel): Panel
                 'panels::footer',
                 fn (): View => view('filament.hooks.footer'),
             )
-            //
+            // sidebar search
+            ->renderHook(PanelsRenderHook::SIDEBAR_NAV_START, fn () => view('filament.hooks.sidebar-searcher'))
+
             ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
             ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
             ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')

composer.lock

@@ -6,27 +6,27 @@
     "isDynamicEntry": true
   },
   "resources/css/another-portfolio.css": {
-    "file": "assets/another-portfolio-CHdWV6HX.css",
+    "file": "assets/another-portfolio-_4Yadymj.css",
     "src": "resources/css/another-portfolio.css",
     "isEntry": true
   },
   "resources/css/app.css": {
-    "file": "assets/app-CdfNiqFV.css",
+    "file": "assets/app-iSOyfotK.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },
   "resources/css/daisy.css": {
-    "file": "assets/daisy-MRkhPJDc.css",
+    "file": "assets/daisy-Dq9VJebj.css",
     "src": "resources/css/daisy.css",
     "isEntry": true
   },
   "resources/css/filament/admin/theme.css": {
-    "file": "assets/theme-BUBSxva8.css",
+    "file": "assets/theme-kgk9yJGs.css",
     "src": "resources/css/filament/admin/theme.css",
     "isEntry": true
   },
   "resources/css/filament/guests/theme.css": {
-    "file": "assets/theme-BlY1apZL.css",
+    "file": "assets/theme-CMzhfayf.css",
     "src": "resources/css/filament/guests/theme.css",
     "isEntry": true
   },

public/build/assets/another-portfolio-CHdWV6HX.css renamed to public/build/assets/another-portfolio-_4Yadymj.css

@@ -0,0 +1,67 @@
+<div
+     @if (filament()->isSidebarCollapsibleOnDesktop())
+        x-bind:class="$store.sidebar.isOpen ? 'block' : 'hidden'"
+    @endif
+>
+    {{--thanks to Azad Furkan ŞAKAR for this idea--}}
+    {{--Source: https://discord.com/channels/883083792112300104/883084832387760148/1354173226896588911--}}
+    <x-filament::input.wrapper
+        class="relative"
+        :inline-prefix="true"
+        prefix-icon="tabler-brand-finder"
+    >
+        <x-filament::input
+            type="text"
+            placeholder="search ..."
+            x-data="sidebarSearch()"
+            x-ref="search"
+            x-on:input.debounce.300ms="filterItems($event.target.value)"
+            x-on:keydown.escape="clearSearch"
+            x-on:keydown.meta.j.prevent.document="$refs.search.focus()"
+        />
+
+        <kbd class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-100 border border-gray-300 text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-50 text-xs px-1.5 flex items-center justify-center gap-1 py-1 rounded-md">
+            @svg('tabler-command', 'h-4 w-4 text-gray-400')
+            <kd>J</kd>
+        </kbd>
+    </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>