Filament Logo Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require jeffersongoncalves/filament-logo
   

   Run the publish command to generate the configuration (if needed):

   php artisan vendor:publish --provider="JeffersonGoncalves\FilamentLogo\FilamentLogoServiceProvider"
   

2. Register the Plugin: Add the plugin to your app/Providers/Filament/AdminPanelProvider.php:

   public function panel(Panel $panel): Panel
   {
       return $panel
           ->plugins([
               \JeffersonGoncalves\FilamentLogo\FilamentLogoPlugin::make(),
           ]);
   }
   

3. First Use Case: The plugin automatically injects the Filament logo into the panel header on mobile devices. No additional configuration is required for basic usage.

Implementation Patterns

Core Workflows

1. Default Behavior:

   • The logo appears only on mobile devices (detected via CSS media queries).
   • Positioned at the top of the panel for consistent branding.

2. Customization:

   • Logo Size/Position: Override the default styles in your panel’s CSS:

     /* app/filament/resources/css/filament/logo.css */
     .filament-logo {
         width: 120px;
         margin-right: 1rem;
     }
     

   • Logo Replacement: Replace the default logo by publishing assets:

     php artisan vendor:publish --tag=filament-logo-assets
     

     Then update resources/views/vendor/filament-logo/logo.blade.php.

3. Conditional Rendering:

   • Disable the logo for specific users/roles by extending the plugin:

     \JeffersonGoncalves\FilamentLogo\FilamentLogoPlugin::make()
         ->canRender(function (User $user) {
             return $user->cannot('view-logo');
         })
     

4. Integration with Themes:

   • Ensure your Filament theme supports responsive design. The plugin relies on Filament’s built-in mobile detection.

Gotchas and Tips

Pitfalls

1. CSS Conflicts:

   • If your panel’s CSS overrides .filament-logo, the logo may disappear or misalign. Use !important sparingly and inspect the rendered HTML/CSS.

2. Mobile Detection:

   • The plugin uses Filament’s internal mobile detection. If you customize Filament’s responsive breakpoints (e.g., in tailwind.config.js), the logo may not appear as expected.

3. Asset Publishing:

   • Forgetting to publish assets (--tag=filament-logo-assets) will retain the default logo, even if you replace files locally.

Debugging

• Logo Not Showing?:

  • Check if the plugin is registered in AdminPanelProvider.
  • Verify no JavaScript errors block the logo’s injection (inspect browser console).
  • Ensure no CSS rule hides .filament-logo or its parent container.

• Custom Logo Not Loading:

  • Clear cached views:

    php artisan view:clear
    

  • Verify the published logo path in resources/views/vendor/filament-logo/logo.blade.php.

Extension Points

1. Dynamic Logo Logic:

   • Extend the plugin to fetch logos dynamically (e.g., from a database):

     FilamentLogoPlugin::make()
         ->getLogoUrl(function () {
             return Logo::where('panel', 'admin')->first()->url;
         });
     

2. Multi-Panel Support:

   • Register the plugin separately for each panel instance:

     $panel->plugins([FilamentLogoPlugin::make()->forPanel('tenant')]);
     

3. Localization:

   • Override the logo’s alt text or title in your language files:

     // resources/lang/en/filament-logo.php
     {
         "logo_alt" = "Custom Admin Panel Logo"
     }