Agregar un Selector de Idioma bajo el Menú de Usuario

Integrar el Selector de Idioma en el Menú de Usuario para una Barra Superior de Filament php

Agregar un Selector de Idioma Bajo el Menú de Usuario

Registra un nuevo gancho de renderizado: Comienza registrando un nuevo gancho de renderizado en tu proveedor de panel. Colocaremos el selector en la posición USER_MENU_PROFILE_AFTER para mantener la barra superior limpia, pero puedes registrarlo en cualquier otra posición que desees.

->renderHook(
    PanelsRenderHook::USER_MENU_PROFILE_AFTER,
    fn (): View => view('filament.hooks.lang-switcher'),
)

Usar el Componente Dropdown

Usaremos el componente dropdown de Filament para renderizar la sub-navegación del selector de idioma. Personaliza la interfaz según sea necesario, como agregar banderas para los diferentes idiomas.

En tu archivo filament.hooks.lang-switcher:

<div>
    <x-filament::dropdown
            maxHeight="250px"
            placement="left-start"
            teleport="true"
    >
        <x-slot name="trigger">
            <div class="p-2 flex items-center justify-start gap-2">
                <x-filament::icon
                    icon="heroicon-o-chevron-left"
                    class="mx-1 h-5 w-5 text-gray-500 dark:text-gray-400"
                />
                Seleccionar idioma
            </div>
        </x-slot>
 
        <x-filament::dropdown.header
            class="font-semibold"
            color="gray"
            icon="heroicon-o-language"
        >
            Seleccionar idioma
        </x-filament::dropdown.header>
 
        <x-filament::dropdown.list>
            <x-filament::dropdown.list.item
                :color="(app()->getLocale() === 'en') ? 'primary' : null"
                icon="heroicon-o-chevron-right"
                :href="url('lang/en')"
                tag="a"
            >
                Inglés
            </x-filament::dropdown.list.item>
 
            <x-filament::dropdown.list.item
                    :color="(app()->getLocale() === 'es') ? 'primary' : null"
                    icon="heroicon-o-chevron-right"
                    :href="url('lang/es')"
                    tag="a"
            >
                Español
            </x-filament::dropdown.list.item>
        </x-filament::dropdown.list>
    </x-filament::dropdown>
</div>

Implementar el Selector de Idioma

Crea una ruta sencilla para capturar el idioma seleccionado y almacenarlo en la sesión:

Route::get('lang/{lang}', function ($lang) {
    session()->put('current_lang', $lang);
 
    return redirect(url()->previousPath());
});

Configurar un Middleware

Define un middleware para indicarle a Laravel que debe tomar el idioma desde la sesión:

class SetLang
{
    public function handle(Request $request, Closure $next): Response
    {
        return app(StartSession::class)
                ->handle($request, function ($request) use ($next) {
                if (! session()->has('current_lang')) {
                    session()->put('current_lang', 'en');
                }
 
                app()->setLocale(session('current_lang', 'en'));
 
                return $next($request);
        });
    }
}

Registrar el Middleware

Finalmente, registra el middleware dentro del proveedor de panel Filament:

->middleware([
        //...
        SetLang::class,
])