Assalamualaikum,

Today I’m gonna share how to customise the Laravel Nova sidebar to use Dashboard component as menu.

First, you need to create new dashboard – php artisan nova:dashboard nasrul-hazim/dashboard-menu.

This will create nova-components/DashboardMenu package.

Next, you need to understand that, anything about data, Laravel nova using their own nova-api, which in our case, we need some data to populate the menu.

So how do we populate the menu data? You can refer to vendor/laravel/nova/resources/views/resources/navigation.blade.php. See the loop part – I have extracted the codes as in following:

As you can see in populateMenus() method, I have extracted the codes from the original blade file to display the menu. With those, I can have the information about the menus.

Once you have the menu information, in your nova-components/DashboardMenu/resources/js/components/Card.vue, you can start manipulate the data which to generate the view. Following are the sample code:

Above code will generate a collapsible menu in dashboard.

To display this menu in main dashboard, you can register the card in the app/Providers/NovaServiceProvider.php.

Lastly, do remove the following codes in resources/views/vendor/nova/layout.blade.php

Now, you should be able to have your own menu in your main dashboard.

Thanks,
Nasrul Hazim