Sidebar Resize

• Table of contents
• Features
• Requirements
• Installation
• Configuration
• Panel registration
  • With custom width limits
  • With a full-height resize hit area
  • With a collapsible desktop sidebar
• Fluent API reference
• Compatibility
• Publishing and customization
• Troubleshooting
• License

Drag-to-resize sidebar for Filament v5 admin panels. Admin users can adjust the navigation sidebar width by dragging the centered grip on its edge. The full-height divider remains visible without blocking the sidebar scrollbar. The chosen width is persisted in the browser via localStorage and restored on every visit and Livewire navigation.

No Vite, NPM, or Tailwind build step is required — the package injects a single Blade view with minimal inline CSS and vanilla JavaScript through Filament's render hook system.

#Table of contents

1. Features
2. Requirements
3. Installation
4. Configuration
5. Panel registration
6. Fluent API reference
7. Compatibility
8. How it works
9. Publishing and customization
10. Troubleshooting
11. License

#Features

• Drag-to-resize — a visible grip on the sidebar edge lets users resize with the mouse (col-resize cursor).
• Scrollbar-friendly divider — the full-height divider remains visible while only the centered grip is draggable by default.
• Filament-native layout — updates the --sidebar-width CSS variable and inline sidebar dimensions so .fi-main and the rest of the layout respond correctly.
• localStorage persistence — each Filament panel stores its own width key (martin6363-sidebar-resize:{panelId}).
• Collapsible sidebar support — works alongside sidebarCollapsibleOnDesktop(); inline width styles are cleared when the sidebar is collapsed and restored when expanded.
• RTL-aware — handle position and drag direction respect dir="rtl" layouts.
• SPA-safe — re-initializes cleanly on livewire:navigated without duplicate handles or event listeners.
• Zero frontend build — no asset compilation, no external JavaScript libraries.

#Requirements

• PHP ^8.2, ^8.3, or ^8.4
• Laravel ^12, or ^13
• Filament ^5.0

#Installation

composer require martin6363/filament-sidebar-resize

The service provider is auto-discovered. Optionally publish the config file:

php artisan vendor:publish --tag=sidebar-resize-config

Register the plugin on your Filament panel (see Panel registration).

#Configuration

Published file: config/sidebar-resize.php

return [
    'min_width' => 200,
    'max_width' => 450,
    'central_grip_only' => true,
];

These defaults apply globally. Override them per panel with the plugin's fluent methods.

#Panel registration

Add the plugin to your panel provider:

use Filament\Panel;
use Filament\PanelProvider;
use Martin6363\SidebarResize\SidebarResizePlugin;

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('admin')
            ->path('admin')
            ->plugins([
                SidebarResizePlugin::make(),
            ]);
    }
}

#With custom width limits

SidebarResizePlugin::make()
    ->minWidth(220)
    ->maxWidth(480),

#With a full-height resize hit area

The centered grip is the only draggable area by default. Restore the legacy full-height sidebar edge per panel when needed:

SidebarResizePlugin::make()
    ->centralGripOnly(false),

#With a collapsible desktop sidebar

The plugin is designed to coexist with Filament's collapsible sidebar. No extra setup is required:

return $panel
    ->sidebarCollapsibleOnDesktop()
    ->plugins([
        SidebarResizePlugin::make(),
    ]);

When the sidebar is collapsed, resize styles are removed so Filament can render the narrow icon-only layout. When expanded again, the user's saved width is reapplied.

#Fluent API reference

#Compatibility

#Publishing and customization

php artisan vendor:publish --tag=sidebar-resize-config

Adjust min_width, max_width, and central_grip_only in the published config, or override them per panel with ->minWidth(), ->maxWidth(), and ->centralGripOnly().

#Troubleshooting

The resize handle does not appear

• Confirm the plugin is registered in ->plugins([...]) on the active panel.
• The handle is desktop-only (≥ 1024px viewport width).
• The sidebar must be expanded (fi-sidebar-open). It is hidden when the sidebar is collapsed.
• Panels with top navigation (->topNavigation()) are intentionally excluded.

Sidebar collapse stops working after installing the plugin

• Update to the latest package version. Collapsible desktop sidebars require inline width styles to be cleared on collapse.
• Ensure you are not setting sidebar width elsewhere with inline styles or custom CSS that uses !important.

Width resets after refresh

• Check that localStorage is available and not blocked (private browsing restrictions, browser extensions).
• Each panel uses its own key: martin6363-sidebar-resize:{panelId}. Switching panels will load that panel's saved width.

Width does not apply on first paint

• The script runs at BODY_END. A brief flash of the default Filament width may occur before the saved width is applied. This is expected without a head-level blocking script.

Drag feels laggy

• Width updates during drag are already throttled through requestAnimationFrame. If custom CSS adds transition to the sidebar, the plugin disables transitions on the sidebar while dragging via body.fi-sidebar-resizing.

#License

The MIT License (MIT). Copyright (c) Martin.