Filament•2y ago

Customizing the tenant menu

The docs say the tenant menu is fully customizable. How can I deal with the dropdown if it has too many items / tenants? Can I make it searchable etc.? Thank you!

4 Replies

jeroenmager•17mo ago

@flanger.dev I see this question has been open for a while, have you found a solution for this problem? i'm running into the same thing right now

awcodes•17mo ago

You best bet is going to be using css to set a max height on the floating panel and making it scrollable.

jbenavidesv•2mo ago

Hello, its been a while, but I have a workaround @Florian Langer and @Jeroen Mager: Make a livewire component

php artisan make:livewire ShowTenants

php artisan make:livewire ShowTenants

In the livewire view, add something like this:

@php
$tenant = Filament\Facades\Filament::getTenant();
# Get your tenants, filtered, orderded...
$tenants = App\Models\YourTeantModel::where('visible', true)->orderBy('order_column')->get();
@endphp

<x-filament::dropdown placement="bottom-end">
    <x-slot name="trigger">
        <x-filament::link>
            {{ $tenant->name }}
        </x-filament::link>
    </x-slot>

    <x-filament::dropdown.list>
        <x-filament::dropdown.list.item href="/{{ $tenant->id }}yourTenantModel/{{ $tenant->id }}/edit" tag="a" icon="heroicon-o-pencil-square">
            Edit
        </x-filament::dropdown.list.item>
        <x-filament::dropdown.list.item href="/{{ $tenant->id }}/yourTenantModel" tag="a" icon="heroicon-o-cog">
          My tenants
        </x-filament::dropdown.list.item>
    </x-filament::dropdown.list>    

    <x-filament::dropdown.list>
        @foreach($tenants as $t)
            <x-filament::dropdown.list.item href="/{{ $t->id }}/" tag="a">
                {{ $t-name }}
            </x-filament::dropdown.list.item>
        @endforeach
    </x-filament::dropdown.list>
</x-filament::dropdown>

@php
$tenant = Filament\Facades\Filament::getTenant();
# Get your tenants, filtered, orderded...
$tenants = App\Models\YourTeantModel::where('visible', true)->orderBy('order_column')->get();
@endphp

<x-filament::dropdown placement="bottom-end">
    <x-slot name="trigger">
        <x-filament::link>
            {{ $tenant->name }}
        </x-filament::link>
    </x-slot>

    <x-filament::dropdown.list>
        <x-filament::dropdown.list.item href="/{{ $tenant->id }}yourTenantModel/{{ $tenant->id }}/edit" tag="a" icon="heroicon-o-pencil-square">
            Edit
        </x-filament::dropdown.list.item>
        <x-filament::dropdown.list.item href="/{{ $tenant->id }}/yourTenantModel" tag="a" icon="heroicon-o-cog">
          My tenants
        </x-filament::dropdown.list.item>
    </x-filament::dropdown.list>    

    <x-filament::dropdown.list>
        @foreach($tenants as $t)
            <x-filament::dropdown.list.item href="/{{ $t->id }}/" tag="a">
                {{ $t-name }}
            </x-filament::dropdown.list.item>
        @endforeach
    </x-filament::dropdown.list>
</x-filament::dropdown>

You can edit your dropdown following this: https://filamentphp.com/docs/3.x/support/blade-components/dropdown and add any blade elements you need. Then, you have to add in AppServiceProvider.php:

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

public function register(): void
{
    // ...

    FilamentView::registerRenderHook(
        PanelsRenderHook::TOPBAR_START, # You can change the placement here, docs: https://filamentphp.com/docs/3.x/support/render-hooks#available-render-hooks
        fn(): string => Blade::render('@livewire(\'show-tenants\')'),
    );
}

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

public function register(): void
{
    // ...

    FilamentView::registerRenderHook(
        PanelsRenderHook::TOPBAR_START, # You can change the placement here, docs: https://filamentphp.com/docs/3.x/support/render-hooks#available-render-hooks
        fn(): string => Blade::render('@livewire(\'show-tenants\')'),
    );
}

Finally, hide the default tenant menu item by adding this in AdminPanelProvider or your panel provider:

->tenantMenu(false)

->tenantMenu(false)

jbenavidesv•2mo ago

You will get something like this. As you can see, I also added a conditional icon for the tenants.

Gaming

Programming

Customizing the tenant menu

Did you find this page helpful?