Here, we'll discuss our sidebar menu/Navigation menu. We'll describe every method of our menus. Let's deep dive into it.
We have two types of menus for two different layouts.
We are using a JSON file to store all menus list and render it in our menus. You can find these JSON files in the /resources/menu/
folder.
To add your new page navigation link in the sidebar menu/navigation menu, you need to add your page details in both menu JSON
files.
{
"url": "/your-page-link",
"name": "your page",
"slug": "your-route-name" // it should be your route name
},
slug
should be the own route name
:use App\Http\Controllers\dashboard\ControllerName;
Route::get('/your-page-link', [ControllerName::class, 'ClassName'])->name('Alias');
{
"name": "Dashboards",
"icon": "menu-icon tf-icons bx bx-home-circle",
"slug": "dashboard", // parent slug
"submenu": [
{
"url": "/",
"name": "Analytics",
"slug": "dashboard-analytics" // prefixed with parent slug
},
{
"url": "/dashboard/crm",
"name": "CRM",
"slug": "dashboard-crm" // prefixed with parent slug
},
]
},
use App\Http\Controllers\dashboard\Analytics;
Route::get('/dashboard/analytics', [Analytics::class, 'index'])->name('dashboard-analytics');
lang-> {en|fr|de|ar}.json
files. Refer to localization for more details.
We have pass our menus json files in all views files using services Provider
.
We have created a MenuServiceProvider
. Learn more about the service provider from here. In its boot menu, we have decoded the JSON file and made it globally accessible in views (blade)
files.
public function boot(): void
{
$verticalMenuJson = file_get_contents(base_path('resources/menu/verticalMenu.json'));
$verticalMenuData = json_decode($verticalMenuJson);
$horizontalMenuJson = file_get_contents(base_path('resources/menu/horizontalMenu.json'));
$horizontalMenuData = json_decode($horizontalMenuJson);
// Share all menuData to all the views
$this->app->make('view')->share('menuData', [$verticalMenuData, $horizontalMenuData]);
}
We are rendering our menus in the below files. You can find these files here: /views/layouts/sections/menu
verticalMenu.blade.php
file is used for the Vertical layout:<ul class="menu-inner py-1">
@foreach ($menuData[0]->menu as $menu)
...
@endforeach
</ul>
horizontalMenu.blade.php
file is used for the Horizontal layout:<ul class="menu-inner">
@foreach ($menuData[1]->menu as $menu)
...
@endforeach
</ul>
<ul class="menu-sub">
@if (isset($menu))
@foreach ($menu as $submenu)
...
@endforeach
@endif
</ul>