README

通过在侧边栏中组织页面，使页面间的导航更舒适。

注意：它支持页面和资源页面。

注意：对于 Filament 2.x 使用 1.x 版本

屏幕截图

LTR (从左到右)

RTL (从右到左)

请观看由 Povilas Korop (Laravel Daily) 发布的视频，了解更多关于我们的包的信息：链接

安装

composer require aymanalhattami/filament-page-with-sidebar

可选地，您可以发布配置、视图和组件文件

php artisan vendor:publish --tag="filament-page-with-sidebar-config"
php artisan vendor:publish --tag="filament-page-with-sidebar-views"

与资源页面一起使用

首先，您需要准备资源页面，例如，我们有一个编辑页面、查看页面、管理页面、更改密码页面和用户资源仪表板页面

use Filament\Resources\Resource;

class UserResource extends Resource 
{
    // ...

    public static function getPages(): array
    {
        return [
            'index' => App\Filament\Resources\UserResource\Pages\ListUsers::route('/'),
            'edit' => App\Filament\Resources\UserResource\Pages\EditUser::route('/{record}/edit'),
            'view' => App\Filament\Resources\UserResource\Pages\ViewUser::route('/{record}/view'),
            'manage' => App\Filament\Resources\UserResource\Pages\ManageUser::route('/{record}/manage'),
            'password.change' => App\Filament\Resources\UserResource\Pages\ChangePasswordUser::route('/{record}/password/change'),
            'dashboard' => App\Filament\Resources\UserResource\Pages\DashboardUser::route('/{record}/dashboard'),
            // ... more pages
        ];
    }

    // ...
}

在每个自定义页面中定义一个 $record 属性，例如

public ModelName $record; // public User $record;

然后，在资源中定义 sidebar 方法为静态

use Illuminate\Database\Eloquent\Model;
use Filament\Resources\Resource;
use AymanAlhattami\FilamentPageWithSidebar\FilamentPageSidebar;
use AymanAlhattami\FilamentPageWithSidebar\PageNavigationItem;

class UserResource extends Resource 
{
    // ....

    public static function sidebar(Model $record): FilamentPageSidebar
    {
        return FilamentPageSidebar::make()
            ->setNavigationItems([
                PageNavigationItem::make('User Dashboard')
                    ->url(function () use ($record) {
                        return static::getUrl('dashboard', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('View User')
                    ->url(function () use ($record) {
                        return static::getUrl('view', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Edit User')
                    ->url(function () use ($record) {
                        return static::getUrl('edit', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Manage User')
                    ->url(function () use ($record) {
                        return static::getUrl('manage', ['record' => $record->id]);
                    }),
                PageNavigationItem::make('Change Password')
                    ->url(function () use ($record) {
                        return static::getUrl('password.change', ['record' => $record->id]);
                    }),

                // ... more items
            ]);
    }

    // ....
}

在页面 blade 文件中使用 x-filament-page-with-sidebar::page 组件作为整个内容的包装器

// filament.resources.user-resource.pages.change-password-user
<x-filament-page-with-sidebar::page>
    // ... page content
</x-filament-page-with-sidebar::page>

或添加 AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar 特性，以便在需要侧边栏的任何页面上包含侧边栏。此特性将为页面添加侧边栏。将其添加到所有资源页面

// ...
use AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar;

class ViewUser extends ViewRecord
{
    use HasPageSidebar; // use this trait to activate the Sidebar

    protected static string $resource = UserResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\EditAction::make(),
        ];
    }
}

如果您想使用自定义视图，您仍然可以通过 protected static string $hasSidebar = false; 和 protected static $view = 'filament.[...].user-resource.pages.view-user'; 来覆盖默认值

与页面一起使用

将 AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar 特性添加到任何您想包含侧边栏的页面上。
然后，在页面上定义 sidebar 方法为静态

// ...
use AymanAlhattami\FilamentPageWithSidebar\Traits\HasPageSidebar;
use Filament\Pages\Page;

class GeneralSettings extends Page
{
    use HasPageSidebar; // use this trait to activate the Sidebar

    // ...
    public static function sidebar(): FilamentPageSidebar
    {
        return FilamentPageSidebar::make()
            ->setTitle('Application Settings')
            ->setDescription('general, admin, website, sms, payments, notifications, shipping')
            ->setNavigationItems([
                PageNavigationItem::make('General Settings')
                    ->translateLabel()
                    ->url(GeneralSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(GeneralSettings::getRouteName());
                    })
                    ->visible(true),
                PageNavigationItem::make('Admin Panel Settings')
                    ->translateLabel()
                    ->url(AdminPanelSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(AdminPanelSettings::getRouteName());
                    })
                    ->visible(true),
                PageNavigationItem::make('Web Settings')
                    ->translateLabel()
                    ->url(WebsiteSettings::getUrl())
                    ->icon('heroicon-o-cog-6-tooth')
                    ->isActiveWhen(function () {
                        return request()->routeIs(WebsiteSettings::getRouteName());
                    })
                    ->visible(true),
                // ...
            ]);
    }
    
    // ...
}

更多选项

设置侧边栏的标题和描述

您可以通过使用 setTitle、setDescription、setDescriptionCopyable 方法为侧边栏设置标题或描述，这些方法将为侧边栏中顶部开始的侧边栏设置，例如

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setTitle('Sidebar title')
        ->setDescription('Sidebar description')
        ->setDescriptionCopyable()
        ->setNavigationItems([
            PageNavigationItem::make(__('User Dashboard'))
                ->url(function () use ($record) {
                    return static::getUrl('dashboard', ['record' => $record->id]);
                }),
            PageNavigationItem::make(__('View User'))
                ->url(function () use ($record) {
                    return static::getUrl('view', ['record' => $record->id]);
                }),

            // ... more items
        ]);
}

// ...

设置导航布局

您可以通过使用 ->sidebarNavigation() 将导航设置为侧边栏，或使用 ->topbarNavigation() 将其设置为顶栏。默认布局是侧边栏

侧边栏

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->sidebarNavigation();
        // 
}

// ...

顶栏

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->topbarNavigation();
        // 
}

// ...

添加图标

您可以通过使用 icon 方法为项目添加图标，例如

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })->icon('heroicon-o-collection')

            // ... more items
        ]);
}

// ...

添加分组

您可以将导航项分组，例如

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->group('Manage User')

            // ... more items
        ]);
}

// ...

设置活动项

您可以通过使用 isActiveWhen 方法使项目活动（具有不同的背景颜色），例如

// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->isActiveWhen(function () {
                    return request()->route()->action['as'] == 'filament.resources.users.password.change';
                })
            // ... more items
        ]);
}
// ...

隐藏项目

您可以通过使用 visible 方法从侧边栏中控制项目的可见性，例如

// ...

public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->visible(false)
            // ... more items
        ]);
}
    ,
// ...

为项目添加徽章

您可以通过使用 badge 方法为项目添加徽章，例如

// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
                ->badge("badge name")
            // ... more items
        ]);
}
    ,
// ...

翻译项目

您可以通过使用 translateLabel 方法翻译标签，例如

// ...
public static function sidebar(Model $record): FilamentPageSidebar
{
    return FilamentPageSidebar::make()->translateLabel()
        ->setNavigationItems([
            PageNavigationItem::make('Change Password')
                ->url(function () use ($record) {
                    return static::getUrl('password.change', ['record' => $record->id]);
                })
            // ... more items
        ]);
}
    ,
// ...

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件

演示项目链接

aymanalhattami / filament-page-with-sidebar

维护者

详细信息