How to show the language menu shown in the AdminLTE examples

I have built a small web application using Laravel 8 and I was requested to integrate AdminLTE to it. I am new to AdminLTE and part of the requirements is to translate the pages content, but I had no idea of how to create such menu.

The idea is to come to this:

Solution

Here I want explain how I got there. It took me some hours to understand how this works so I think someone else could benefit from my work.

I am assuming you have already successfully integrated the AdminLTE dashboard to your Laravel application.

The key is to open the file C:\your_web_app_folder\config\adminlte.php with your preferred text editor.

Find the "Menu Items" section and add the following text inside the 'menu' => [] element:

[
    'text' => 'Language',
    'topnav_right' => true,
    'icon' => 'flag-icon flag-icon-us',
    'submenu' => [
        [
            'text'=>'English',
            'icon' => 'flag-icon flag-icon-us',
            'url'=> '#'
        ],
        [
            'text'=>'Khmer',
            'icon' => 'flag-icon flag-icon-kh',
            'url'=> '#'
        ]
    ]
],

Such text can be inserted after the search textbox or wherever you consider it more convenient to you.

The 'text' sets the text that will be shown on your link (optional).

The 'topnav_right' indicates that the language menu will be located on the right side of the navigation bar.

The 'icon', in this case, is going to contain the CSS class that will display the desired icon flag. For this to work, it is necessary to load the respective CSS file which is located in the folder \public\vendor\flag-icon-css\css\flag-icon.css, assuming you previously published those assets using the artisan commands specified in the documentation (https://github.com/jeroennoten/Laravel-AdminLTE/wiki/5.-Artisan-Console-Commands)

Proceeding like this you will have all those CSS/JS/images copied to your \public\vendor folder for easier reference.

There is nothing else to do to create those menus you see on the top nav (notifications, messages, languages, etc). All of them can be built in the same way.