Optimizando el desarrollo en Laravel con Filament: Navegación

Laravel Filament Navegación
Solucionex
03
Jul 25

Seguimos dando pasos hacia adelante en nuestra aplicación con Filament. El siguiente paso natural, una vez creado el dashboard, sería el manejo de la navegación de nuestra aplicación.

Por defecto, Filament registrará de manera automática todos nuestros recursos, clusters y páginas personalizadas dentro del menú de navegación. En este artículo hablaremos sobre la personalización de estos elementos dentro de la navegación.

 

Personalizando la navegación

Cambiar el título del elemento de navegación

Por defecto, el título de cada elemento dentro de la navegación será generado de manera automática, ya sea a partir del nombre del recurso o de una página personalizada. Esto puede ser un problema, ya que mostrará esos nombres tal como los hemos definido. Por ejemplo, un recurso llamado Order aparecerá en el menú con ese mismo nombre. Afortunadamente, podemos personalizar fácilmente cómo se muestra cada elemento de la navegación utilizando la propiedad $navigationLabel dentro de la clase del recurso:

protected static ?string $navigationLabel = 'Pedidos';

También podemos sobreescribir el método getNavigationLabel() de cada recurso y devolver un string con el nombre que queremos mostrar, aunque no es lo ideal.

Añadir un icono al elemento de navegación

Al igual que hicimos con el título, podemos sobreescribir la propiedad  $navigationIcon para mostrar el icono que queramos. Por ejemplo:

protected static ?string $navigationIcon = 'heroicon-o-document-text';
Icono de navegación en Filament

Si establecemos el valor de la propiedad a null en todos los elementos dentro de su mismo grupo, se geneará una línea vertical que los unirá entre sí. 

Ordenar los elementos de navegación

Por defecto, los elementos de la navegación se ordenan alfabéticamente. Podemos cambiar esto sobreescribiendo la propiedad $navigationSort de cada elemento:

protected static ?int $navigationSort = 1;

Añadir una etiqueta a cada elemento

Para añadir una etiqueta a cada elemento de la navegación, podemos usar el método getNavigationBadge() de cada recurso/página:

public static function getNavigationBadge(): ?string
{
    return static::getModel()::count();
}

Gracias a este método, podemos jugar de diferentes maneras para mostrar diferentes resultados. Por ejemplo, imaginemos un selector de metadatos, en el que para un uso correcto de la aplicación debemos seleccionar al menos uno de ellos. Podemos mostrar una alerta de la siguiente manera:

public static function getNavigationBadge(): ?string
    {
        $metadato = static::GetModel()::where('activo', true)->count();

        if($metadato == 0){
            return '!';
        }
        return '';
    }
    
    public static function getNavigationBadgeColor(): ?string
    {
        return 'danger';
    }

Esto nos mostraría algo parecido a esto:

Metadatos Filament Etiqueta

También, podemos añadir una ayuda para esta etiqueta cuando situemos el ratón encima de ella sobreescribiendo la propiedad $navigationBadgeTooltip:

protected static ?string $navigationBadgeTooltip = 'No se ha seleccionado ningún metadato';

Agrupar elementos de la navegación

Es posible que nuestra aplicación crezca tanto que la navegación pueda dificultarse. Gracias a la propiedad $navigationGroup de nuestro recurso/página podemos agrupar varios elementos:

protected static ?string $navigationGroup = 'Sistema';

Esto nos mostrará la siguiente sección agrupada dentro del menú de navegación.

Agrupar elementos de navegación Filament

Para poder personalizar estos grupos de navegación, debemos llamar al método navigationGroups() dentro de nuestra configuración:

use Filament\Navigation\NavigationGroup;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->navigationGroups([
            NavigationGroup::make()
                 ->label('Pedidos')
                 ->icon('heroicon-o-shopping-cart'),
            NavigationGroup::make()
                ->label('Sistema')
                ->icon('heroicon-o-pencil'),
        ]);
}

Según estén ordenados en el array, saldrán de la misma manera dentro del menú de navegación.

Registrar elementos de navegación personalizados

No siempre mostraremos en nuestro menú de navegación elementos que provengan directamente de recursos o páginas de la aplicación. Por ejemplo, podemos añadir un elemento al menú que abra otro sitio web en una nueva pestaña:

use Filament\Navigation\NavigationItem;
use Filament\Pages\Dashboard;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->navigationItems([
            NavigationItem::make('Google')
                ->url('https://google.com', shouldOpenInNewTab: true)
                ->group('Enlaces')
                ->sort(3),
        ]);
}

Ocultar condicionalmente los elementos de la navegación

Si por algún motivo, queremos ocultar algún elemento de la navegación, podemos usar los métodos visible() y hidden() junto con una condición. Por ejemplo:

use Filament\Navigation\NavigationItem;

NavigationItem::make('Sistema')
    ->visible(fn(): bool => auth()->user()->can('view-system'))
    // or
    ->hidden(fn(): bool => ! auth()->user()->can('view-system')),

 

Conclusión

La navegación de Filament es altamente flexible y nos permite organizar nuestros recursos y páginas de forma clara y accesible, permitiendo adaptar el panel de administración a las necesidades de cada proyecto.

 

 

Fuentes

Documentación oficial de Filament

laravel