F
Filament•2mo ago
Tomato

with sidebarCollapsibleOnDesktop() how to resize custom action button at navbar

Hello i want to ask how to make action button become smaller or hide when press collapse sidebar. The action button below make the sidebar bigger and not close all the sidebar How to fix this? Thank you so much before! 
<?php

namespace App\Livewire;

use App\Models\Appointment;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Support\Enums\Size;
use Livewire\Component;

class ActionShortcuts extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public Appointment $appointment;

    public function schedule(): Action
    {
        return Action::make('appointment')
            ->color('info')
            ->keyBindings(['command+n', 'ctrl+n'])
            ->icon('heroicon-m-calendar')
            ->label('New Appointment')
            ->extraAttributes(['class' => 'w-full'])
            ->size(Size::Large)
            ->action(fn () => dd('schedule'));
    }

    public function render(): string
    {
        return <<<'HTML'
            <div class="space-y-2">
                {{ $this->schedule }}
            </div>
        HTML;
    }
}
<?php

namespace App\Livewire;

use App\Models\Appointment;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Support\Enums\Size;
use Livewire\Component;

class ActionShortcuts extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public Appointment $appointment;

    public function schedule(): Action
    {
        return Action::make('appointment')
            ->color('info')
            ->keyBindings(['command+n', 'ctrl+n'])
            ->icon('heroicon-m-calendar')
            ->label('New Appointment')
            ->extraAttributes(['class' => 'w-full'])
            ->size(Size::Large)
            ->action(fn () => dd('schedule'));
    }

    public function render(): string
    {
        return <<<'HTML'
            <div class="space-y-2">
                {{ $this->schedule }}
            </div>
        HTML;
    }
}
Solution:
what about this? ```php use Filament\Schemas\Components\Html;...
Jump to solution
5 Replies
Tomato
TomatoOP•2mo ago
No description
No description
Dennis Koch
Dennis Koch•2mo ago
If you add custom items you need to add CSS to cater for that. I guess there is a CSS class that tells whether the sidebar is open or collapsed.
Solution
LeandroFerreira
LeandroFerreira•2mo ago
what about this? 
use Filament\Schemas\Components\Html;

public function scheduleAction(): Action
{
    return Action::make('schedule')
        ->label(Html::make(<<<'HTML'
            <span x-show="$store.sidebar.isOpen">
                New Appointment
            </span>
        HTML))
        ->icon('heroicon-s-calendar')
        ->action(fn () => dd('schedule'));
}

public function render(): string
{
    return <<<'HTML'
        <div class="space-y-2" x-data>
            {{ $this->scheduleAction }}
        </div>
    HTML;
}
use Filament\Schemas\Components\Html;

public function scheduleAction(): Action
{
    return Action::make('schedule')
        ->label(Html::make(<<<'HTML'
            <span x-show="$store.sidebar.isOpen">
                New Appointment
            </span>
        HTML))
        ->icon('heroicon-s-calendar')
        ->action(fn () => dd('schedule'));
}

public function render(): string
{
    return <<<'HTML'
        <div class="space-y-2" x-data>
            {{ $this->scheduleAction }}
        </div>
    HTML;
}
LeandroFerreira
LeandroFerreira•2mo ago
Note: The method must share the exact same name as the action, or the name followed by Action function scheduleAction / make('schedule')
Tomato
TomatoOP•2mo ago
Hey, it works! Thank you!

Did you find this page helpful?