Merge pull request #11698 from filamentphp/fix/sidebar-scroll

fix: Sidebar scroll with collapsible dropdowns

packages/panels/resources/views/components/layout/base.blade.php

@@ -67,32 +67,6 @@
 
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::STYLES_AFTER, scopes: $livewire->getRenderHookScopes()) }}
 
-        <script>
-            document.addEventListener('DOMContentLoaded', () => {
-                setTimeout(() => {
-                    const activeSidebarItem = document.querySelector(
-                        '.fi-sidebar-item-active',
-                    )
-
-                    if (!activeSidebarItem) {
-                        return
-                    }
-
-                    const sidebarWrapper =
-                        document.querySelector('.fi-sidebar-nav')
-
-                    if (!sidebarWrapper) {
-                        return
-                    }
-
-                    sidebarWrapper.scrollTo(
-                        0,
-                        activeSidebarItem.offsetTop - window.innerHeight / 2,
-                    )
-                }, 0)
-            })
-        </script>
-
         @if (! filament()->hasDarkMode())
             <script>
                 localStorage.setItem('theme', 'light')

packages/panels/resources/views/components/layout/index.blade.php

@@ -90,7 +90,41 @@
                 class="fi-sidebar-close-overlay fixed inset-0 z-30 bg-gray-950/50 transition duration-500 dark:bg-gray-950/75 lg:hidden"
             ></div>
 
-            <x-filament-panels::sidebar :navigation="$navigation" />
+            <x-filament-panels::sidebar
+                :navigation="$navigation"
+                class="fi-main-sidebar"
+            />
+
+            <script>
+                document.addEventListener('DOMContentLoaded', () => {
+                    setTimeout(() => {
+                        let activeSidebarItem = document.querySelector(
+                            '.fi-main-sidebar .fi-sidebar-item.fi-active',
+                        )
+
+                        if (activeSidebarItem?.offsetParent === null) {
+                            activeSidebarItem = document.querySelector(
+                                '.fi-main-sidebar .fi-sidebar-group.fi-active',
+                            )
+                        }
+
+                        if (activeSidebarItem?.offsetParent === null) {
+                            return
+                        }
+
+                        const sidebarWrapper = document.querySelector('.fi-main-sidebar .fi-sidebar-nav')
+
+                        if (!sidebarWrapper) {
+                            return
+                        }
+
+                        sidebarWrapper.scrollTo(
+                            0,
+                            activeSidebarItem.offsetTop - window.innerHeight / 2,
+                        )
+                    }, 0)
+                })
+            </script>
         @endif
     </div>
 </x-filament-panels::layout.base>

packages/panels/resources/views/components/sidebar/group.blade.php

@@ -16,7 +16,10 @@
 <li
     x-data="{ label: @js($subNavigation ? "sub_navigation_{$label}" : $label) }"
     data-group-label="{{ $label }}"
-    {{ $attributes->class(['fi-sidebar-group flex flex-col gap-y-1']) }}
+    {{ $attributes->class([
+        'fi-sidebar-group flex flex-col gap-y-1',
+        'fi-active' => $active,
+    ]) }}
 >
     @if ($label)
         <div

packages/panels/resources/views/components/sidebar/index.blade.php

@@ -33,11 +33,11 @@
             "
         @endif
     @endif
-    @class([
+    {{ $attributes->class([
         'fi-sidebar fixed inset-y-0 start-0 z-30 flex flex-col h-screen content-start bg-white transition-all dark:bg-gray-900 lg:z-0 lg:bg-transparent lg:shadow-none lg:ring-0 lg:transition-none dark:lg:bg-transparent',
         'lg:translate-x-0 rtl:lg:-translate-x-0' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
         'lg:-translate-x-full rtl:lg:translate-x-full' => filament()->hasTopNavigation(),
-    ])
+    ]) }}
 >
     <div class="overflow-x-clip">
         <header