Ajouter du texte en bas du menu latéral

Dans cet article, nous allons voir comment ajouter du texte en bas du menu latéral dans Filament en créant un thème personnalisé.

Étapes à suivre

1. Création du thème personnalisé

Pour commencer, nous devons créer un thème Filament personnalisé avec la commande suivante :

php artisan make:filament-theme

Cela générera les fichiers nécessaires pour personnaliser l'apparence de l'interface d'administration.

2. Configuration de Vite

Ensuite, nous devons ajouter notre fichier CSS personnalisé dans la configuration de Vite. Ouvrez le fichier vite.config.js et ajoutez la ligne suivante :

'resources/css/filament/admin/theme.css'

Cela garantit que notre fichier CSS est bien pris en compte lors de la compilation des assets.

3. Ajout du thème dans le Panel Provider

Dans votre PanelProvider, ajoutez la ligne suivante pour activer le thème personnalisé :

->viteTheme('resources/css/filament/admin/theme.css')

Cela permet d'appliquer notre thème à l'interface de Filament.

4. Utilisation du hook pour ajouter du contenu en bas du menu latéral

Nous allons maintenant utiliser un hook pour ajouter un texte en bas du menu latéral. Ajoutez le code suivant dans le PanelProvider :

->renderHook(PanelsRenderHook::SIDEBAR_NAV_END,
function (){
    return view('filament.sidebar-bottom');
})

Cela indique à Filament d'insérer notre vue personnalisée à la fin du menu latéral.

5. Création de la vue

Enfin, nous devons créer la vue resources/views/filament/sidebar-bottom.blade.php et y ajouter le contenu suivant :

<div class="mt-auto text-gray-700 dark:text-gray-400 text-xs text-center">
    Version 1.0.0
</div>

Cette petite section de texte s'affichera en bas du menu latéral avec un style adapté aux modes clair et sombre.

Conclusion

Grâce à ces étapes simples, nous avons pu ajouter du texte personnalisé en bas du menu latéral de Filament. Cela peut être utile pour afficher des informations telles que la version de l'application, des liens de contact ou des messages importants. Cette méthode vous permet également d'ajouter d'autres éléments personnalisés pour améliorer l'expérience utilisateur.