Filament•6mo ago

Thin side bar and ☰ at the same time

Hello! I need a panel to have both sidebarCollapsibleOnDesktop() and sidebarFullyCollapsibleOnDesktop(). How can I achieve that? What I've tried:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->sidebarCollapsibleOnDesktop()
        ->sidebarFullyCollapsibleOnDesktop();
}

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->sidebarCollapsibleOnDesktop()
        ->sidebarFullyCollapsibleOnDesktop();
}

But filament is ignoring sidebarFullyCollapsibleOnDesktop().

1 Reply

cawecoy•6mo ago

Goal description (see also the attached gif):

When user clicks on the ☰ button, a side bar from sidebarFullyCollapsibleOnDesktop() slides from the left side. Then it stays in front of the whole page including the thin side bar from sidebarCollapsibleOnDesktop() and the page main content - they also gets covered by a black overlay (.fi-sidebar-close-overlay). Note: that should also happen on desktop with highest screen sizes.

I guess I will need 2 side bars but filament always creates only one side bar. Should I publish and change filament views 😢 ? Should I create a custom view for the second side bar and render it using renderHook? Any better idea?

Gaming

Programming

Thin side bar and ☰ at the same time