How can I customize the sidebar to have this design?

Solution:

5 Replies

jaocero•12mo ago

 ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->groups([
                    NavigationGroup::make('')
                        ->items([
                            NavigationItem::make('Dashboard')
                                ->icon('heroicon-o-home')
                                ->isActiveWhen(fn (): bool => request()->routeIs('filament.admin.pages.dashboard'))
                                ->url(fn (): string => Dashboard::getUrl()),
                        ]),
                    NavigationGroup::make('Accounts')
                        ->items([
                            ...AdminUserResource::getNavigationItems(),
                            ...OrganizationUserResource::getNavigationItems(),
                            ...SecurityResearcherResource::getNavigationItems(),
                        ])
                        ->icon('heroicon-o-users'),
                    NavigationGroup::make('')
                        ->items([
                            ...OrganizationResource::getNavigationItems(),
                        ]),
                ]);
            })

 ->navigation(function (NavigationBuilder $builder): NavigationBuilder {
                return $builder->groups([
                    NavigationGroup::make('')
                        ->items([
                            NavigationItem::make('Dashboard')
                                ->icon('heroicon-o-home')
                                ->isActiveWhen(fn (): bool => request()->routeIs('filament.admin.pages.dashboard'))
                                ->url(fn (): string => Dashboard::getUrl()),
                        ]),
                    NavigationGroup::make('Accounts')
                        ->items([
                            ...AdminUserResource::getNavigationItems(),
                            ...OrganizationUserResource::getNavigationItems(),
                            ...SecurityResearcherResource::getNavigationItems(),
                        ])
                        ->icon('heroicon-o-users'),
                    NavigationGroup::make('')
                        ->items([
                            ...OrganizationResource::getNavigationItems(),
                        ]),
                ]);
            })

In you panel provider put this, then in your resources just remove all protected static ?string $navigationIcon

Solution

jaocero•12mo ago

ConnorHowell•12mo ago

Main theory is to manually setup your groups as per: https://filamentphp.com/docs/3.x/panels/navigation#customizing-navigation-groups Then for every resource/page in that group you remove the icon and it'll do that

Navigation - Panel Builder - Filament

ZedoX•12mo ago

Add icon to your nav groups & remove them from your Resources

DkilOP•12mo ago

Thank you guys ❤️

Gaming

Programming

How can I customize the sidebar to have this design?