Add a Language Switcher Under The User Menu
- Published: 22 Apr 2024 Updated: 04 May 2024
Integrate Language Switcher in User Menu for a Cleaner Top Bar
Register a Render Hook:
Begin by registering a new render hook to your panel provider. We'll place the switcher in the USER_MENU_PROFILE_AFTER position to keep the top bar clean, but you can register it any position you want.
1->renderHook(
2 PanelsRenderHook::USER_MENU_PROFILE_AFTER,
3 fn (): View => view('filament.hooks.lang-switcher'),
4)
Use the Dropdown Component
We will use the the dropdown component from Filament to render the sub-navigation for the language switcher. Customize the UI as needed, such as adding flags for different languages.
in your filament.hooks.lang-switcher file:
1<div>
2 <x-filament::dropdown
3 maxHeight="250px"
4 placement="left-start"
5 teleport="true"
6 >
7 <x-slot name="trigger">
8 <div class="p-2 flex items-center justify-start gap-2">
9 <x-filament::icon
10 icon="heroicon-c-chevron-left"
11 class="mx-1 h-5 w-5 text-gray-500 dark:text-gray-400"
12 />
13 Select Language
14 </div>
15 </x-slot>
16
17 <x-filament::dropdown.header
18 class="font-semibold"
19 color="gray"
20 icon="heroicon-c--language"
21 >
22 Select Language
23 </x-filament::dropdown.header>
24
25 <x-filament::dropdown.list>
26 <x-filament::dropdown.list.item
27 :color="(app()->getLocale() === 'en') ? 'primary' : null"
28 icon="heroicon-m-chevron-right"
29 :href="url('lang/en')"
30 tag="a"
31 >
32 English
33 </x-filament::dropdown.list.item>
34
35 <x-filament::dropdown.list.item
36 :color="(app()->getLocale() === 'es') ? 'primary' : null"
37 icon="heroicon-m-chevron-right"
38 :href="url('lang/es')"
39 tag="a"
40 >
41 Español
42 </x-filament::dropdown.list.item>
43 </x-filament::dropdown.list>
44 </x-filament::dropdown>
45</div>
Implement the Switcher
Create a simple route to capture the selected language and store it in the session:
1Route::get('lang/{lang}', function ($lang) {
2 session()->put('current_lang', $lang);
3
4 return redirect(url()->previousPath());
5});
Set Up a Middleware
Define a middleware to instruct Laravel to pick the locale from the session:
1class SetLang
2{
3 public function handle(Request $request, Closure $next): Response
4 {
5 return app(StartSession::class)
6 ->handle($request, function ($request) use ($next) {
7 if (! session()->has('current_lang')) {
8 session()->put('current_lang', 'en');
9 }
10
11 app()->setLocale(session('current_lang', 'en'));
12
13 return $next($request);
14 });
15 }
16}
Register the Middleware
Finally, register the middleware within the Filament panel provider:
1->middleware([
2 //...
3 SetLang::class,
4])
Related Tricks:
how to redirect the user after loging out of filament app
add any link or actions to the topbar
How to Apply Authorization on Create Option Action for Select Field
how to make actions sticky in tables when you have a lot of columns