Filament•2y ago

Navigation is off... (incorrect margins and paddings)

Hey - I've got a problem with my navigation. Right now it looks like in the screenshot, but I would like to have it nicely aligned with each other. Problem is that I don't know what is wrong there, since it's like this from the start. All I'm doing is build the navigation manually via NavigationGroup::make() and NavigationItem::make(). Edit: Just to clarify - I think Filament should do what I want on it's own, but I don't know where to look for the part where it goes wrong.

33 Replies

Dennis Koch•2y ago

Can you show your code?

I think Filament should do what I want on it's own, but I don't know where to look for the part where it goes wrong.

Why do you even build it yourself? Aren't these just all resources and pages?

toeknee•2y ago

It looks like you have put WERKZEUGE into it Bestandsprobleme

Dennis Koch•2y ago

Maybe that fixes your Bestandsprobleme 🥁

Husky110OP•2y ago

This is my code:

public static function buildNavigation() : void
    {
        Filament::navigation(function (\Filament\Navigation\NavigationBuilder $navigationBuilder){
            return $navigationBuilder->items([
                NavigationItem::make('Dashboard')
                    ->icon('heroicon-o-home')
                    ->activeIcon('heroicon-o-home')
                    ->isActiveWhen(fn (): bool => request()->routeIs('filament.pages.dashboard'))
                    ->url(route('filament.pages.dashboard')),
                NavigationGroup::make(m__('navigation.articlemanagement'))->items([
                    ...ArticleResource::getNavigationItems(),
                    ...InvalidArticleResource::getNavigationItems(),
                    ...StockproblemResource::getNavigationItems(),
                    NavigationGroup::make(m__('general.terms.tools'))->items([
                        NavigationItem::make(m__('articlemanagement.tools.batchtracing.navigationlabel'))
                        ->icon('my-icons.articles.tools.batchtracing')
                        ->url(Articleselection::getUrl())
                        ->isActiveWhen(fn() => str_contains(request()->route()->getName(), 'batchtracing')),
                        ...WarehousemanagementResource::getNavigationItems(),
                    ]),
                ])->collapsible(false),
                NavigationGroup::make(m__('navigation.shippingmanagement'))->items([
                    ...DeliveriesResource::getNavigationItems(),
                ])->collapsible(false),

            ]);
        });
    }

public static function buildNavigation() : void
    {
        Filament::navigation(function (\Filament\Navigation\NavigationBuilder $navigationBuilder){
            return $navigationBuilder->items([
                NavigationItem::make('Dashboard')
                    ->icon('heroicon-o-home')
                    ->activeIcon('heroicon-o-home')
                    ->isActiveWhen(fn (): bool => request()->routeIs('filament.pages.dashboard'))
                    ->url(route('filament.pages.dashboard')),
                NavigationGroup::make(m__('navigation.articlemanagement'))->items([
                    ...ArticleResource::getNavigationItems(),
                    ...InvalidArticleResource::getNavigationItems(),
                    ...StockproblemResource::getNavigationItems(),
                    NavigationGroup::make(m__('general.terms.tools'))->items([
                        NavigationItem::make(m__('articlemanagement.tools.batchtracing.navigationlabel'))
                        ->icon('my-icons.articles.tools.batchtracing')
                        ->url(Articleselection::getUrl())
                        ->isActiveWhen(fn() => str_contains(request()->route()->getName(), 'batchtracing')),
                        ...WarehousemanagementResource::getNavigationItems(),
                    ]),
                ])->collapsible(false),
                NavigationGroup::make(m__('navigation.shippingmanagement'))->items([
                    ...DeliveriesResource::getNavigationItems(),
                ])->collapsible(false),

            ]);
        });
    }

"WERKZEUGE" should be sub-menu within "ARTIKELMANAGEMENT" @toeknee_iom And why I build it myself -> Some of the tools are multistep-pages.

Dennis Koch•2y ago

"WERKZEUGE" should be sub-menu within "ARTIKELMANAGEMENT"

I guess that's the intended behaviour. And nobody ever considered how a third level navigations looks like if you still have items on the second level.

Husky110OP•2y ago

Okay - What's your "get go" on this then? 😅 Plus - even the first-level looks off. See this:

Husky110OP•2y ago

Husky110OP•2y ago

The "Dashboard" has paddings and such. Everyone else - nope.

Dennis Koch•2y ago

Hm. Yeah, you are right. No idea. Your code looks right. Are you using a custom theme? Can you disable it to check whether it works without it?

Husky110OP•2y ago

I think I do, but I don't know how to disable it without breaking vite build... 😅

Dennis Koch•2y ago

Just remove the registration from your AppServiceProvider

Husky110OP•2y ago

ah - that removed it. but no effect on the paddings tho.

Husky110OP•2y ago

stuff is just yellow now... 🙂

Dennis Koch•2y ago

Did you overwrite any view files?

Husky110OP•2y ago

just the brand.blade.php. it contains only this <img src="{{ asset('/images/logo/logo_mit_text.png') }}" alt="Logo" class="h-10">

Dennis Koch•2y ago

Hm. Weird. What if you remove that 3rd level?

Husky110OP•2y ago

Werkzeuge gone?

Dennis Koch•2y ago

But nothing else changed?

Husky110OP•2y ago

Dennis Koch•2y ago

Can you do a php artisan filament:upgrade?

Husky110OP•2y ago

No change.

Dennis Koch•2y ago

I'm out of ideas, sorry.

Andrew Wallo•2y ago

I mean what else is supposed to happen if the navigation label is too long for the width anyway? Keep the label short because if it’s too long it will probably go to the next line

Dennis Koch•2y ago

Where do you see a too long label? All have plenty of space to the right The issue is that "Dashboard" has some padding and the first group "Artikelverwaltung" doesn't have it.

Husky110OP•2y ago

Yep. It's like this since the beginning actually... I just didn't mind until now... 😅

Dennis Koch•2y ago

Is your Filament version up to date?

Husky110OP•2y ago

just ran composer update right now. no changes.

Andrew Wallo•2y ago

Oh sorry I thought “Werkzeuge Versandmanagement” was one label

Husky110OP•2y ago

Interestingly - when I move an item out of a group it works fine, but only for said item...

Husky110OP•2y ago

So the group seems to break it... I've tested some more and I am able to replicate that behaviour in a pristine laravel-installation.

toeknee•2y ago

Can you provide a github repo with this so we can test?

Husky110OP•2y ago

I am actually testing some more myself and prepare a bug-report.

Husky110OP•2y ago

https://github.com/filamentphp/filament/issues/6939 -> Github-Repo inside the issue

GitHub

Custom built NavigationGroup messes up paddings and margins in side...

Package filament/filament Package Version v2.17.50 Laravel Version v10.14.1 + v9.52.10 Livewire Version No response PHP Version PHP 8.1.17 Problem description Using the following code inside the Ap...

Gaming

Programming

Navigation is off... (incorrect margins and paddings)