FilamentPHP v3：侧边栏折叠时隐藏自定义PanelsRenderHook的实现方法

我明白你现在的需求——在Filament v3里，你通过PanelsRenderHook::SIDEBAR_NAV_START注册了一个自定义Livewire组件作为侧边栏头部，但希望侧边栏折叠的时候把这个组件藏起来，对吧？下面给你两种实用的原生实现方案，不用额外依赖第三方工具：

方法一：利用Filament原生CSS类控制（最简单） #

Filament的页面根容器会在侧边栏折叠时自动添加sidebar-collapsed类，我们只需要给自定义组件套个专属容器，再用CSS匹配这个类来隐藏内容就行，步骤如下：

1. 修改AppServiceProvider里的RenderHook注册代码，给Livewire组件加个容器类：

use Filament\Facades\Filament;
use Filament\Support\Facades\Blade;
use Filament\View\PanelsRenderHook;
use Filament\View\Facades\FilamentView;

class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        // 你的注册逻辑
    }

    public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::SIDEBAR_NAV_START,
            fn (): string => Blade::render(
                <<<'BLADE'
                <div class="custom-sidebar-panel-title">
                    @livewire('panel-title', ['panelId' => $panelId])
                </div>
                BLADE,
                ['panelId' => Filament::getCurrentPanel()->getId()]
            ),
        );
    }
}

2. 在你的Filament自定义CSS文件（比如resources/css/filament.css）中添加以下样式：

/* 侧边栏折叠时隐藏自定义组件 */
.sidebar-collapsed .custom-sidebar-panel-title {
    display: none;
}

3. 最后确保你的Panel配置里引入了这个CSS文件（在PanelProvider中）：

->viteTheme('resources/css/filament.css')

这个方案的优势是零逻辑改动，纯样式控制，适合简单的隐藏需求。

方法二：用Alpine.js监听侧边栏状态（响应式交互） #

如果需要更灵活的控制（比如折叠时不仅隐藏，还要触发其他交互），可以用Filament内置的Alpine.js状态来实时同步侧边栏状态，Filament默认已经集成了Alpine，直接用就行：

修改AppServiceProvider中的RenderHook代码，用Alpine的x-show指令绑定侧边栏状态：

use Filament\Facades\Filament;
use Filament\Support\Facades\Blade;
use Filament\View\PanelsRenderHook;
use Filament\View\Facades\FilamentView;

class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        // 你的注册逻辑
    }

    public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::SIDEBAR_NAV_START,
            fn (): string => Blade::render(
                <<<'BLADE'
                <div x-data="{ isSidebarOpen: $store.sidebar.isOpen }" x-show="isSidebarOpen">
                    @livewire('panel-title', ['panelId' => $panelId])
                </div>
                BLADE,
                ['panelId' => Filament::getCurrentPanel()->getId()]
            ),
        );
    }
}

这里的核心是Filament全局Alpine Store里的$store.sidebar.isOpen变量，它会实时同步侧边栏的展开/折叠状态，x-show会自动根据这个状态显示或隐藏组件，完全是响应式的，不需要刷新页面。

小提示 #

• 方法一适合只需要隐藏的简单场景，代码量少；方法二更适合需要结合状态做复杂交互的场景
• 两种方案都完全基于Filament原生能力，不需要额外安装依赖

内容来源于stack exchange