如何在Filament PHP中默认折叠移动端登录后的侧边栏

方法1：通过Filament面板配置自定义 #

在app/Providers/Filament/AdminPanelProvider.php的panel()方法中，添加侧边栏折叠相关配置，针对移动端设置默认折叠状态：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // 保留你原有的其他配置
        ->sidebarCollapsible()
        ->sidebarCollapsed(function () {
            // 检测当前设备是否为移动端，默认折叠侧边栏
            return request()->isMobile();
        });
}

如果你的Filament版本不支持闭包参数，可直接设置默认折叠，Filament会自动适配移动端逻辑：

->sidebarCollapsed(true)

方法2：自定义布局视图添加JS控制 #

若方法1不生效，可通过自定义Filament布局视图，用JS强制移动端加载时折叠侧边栏：

1. 先发布Filament的视图文件（未发布过的话执行）：

php artisan vendor:publish --tag=filament-views

2. 找到resources/views/vendor/filament/layouts/app.blade.php，在页面底部添加以下脚本：

document.addEventListener('DOMContentLoaded', function() {
    const isMobile = window.innerWidth < 1024; // 匹配Filament默认移动端断点
    const toggleBtn = document.querySelector('[data-sidebar-toggle]');
    
    if (isMobile && toggleBtn) {
        // 触发折叠按钮点击事件，收起侧边栏
        toggleBtn.click();
    }
});

方法3：登录后通过Session强制折叠 #

在app/Providers/Filament/AdminPanelProvider.php的boot()方法中，添加登录后的Session设置：

use Filament\Facades\Filament;
use Illuminate\Support\Facades\Session;

public function boot(): void
{
    Filament::serving(function () {
        if (auth()->check() && request()->isMobile()) {
            Session::put('filament.sidebar.collapsed', true);
        }
    });
}

注意：不同Filament版本的API可能略有差异，请根据你使用的版本调整代码。

内容的提问来源于stack exchange，提问作者Alphy Gacheru