Laravel 7.x with Nova Can't use menu from optimistdigital/nova-menu-builder

Question

I am new to Laravel Nova ... I just installed optimistdigital/nova-menu-builder in order to generate menus in a more efficient way then whats generated by nova. My menu structure is very complex and needs more control. Anyway, I installed the package and created a menu. I am at the point where I would like to load it in the sidebar but can't figure out how that works ...

in the navigation.blade.php file I added:

@menu("admin")

Where admin is supposed to be the menu slug

After a refresh, nothing happened. So I tried something more basic. I removed the @menu and added "hello world" instead. It did not appear ... So I ran the following commands:

php artisan config:clear
php artisan cache:clear
php artisan nova:publish

All 3 were executed without any errors. But the sidebar still did not show my hello world.

So my question is the following. How can I reflect my changes in the blade views? And is @menu("") the right way to use the optimistdigital/nova-menu-builder package? The documentation seems to be missing the part on how to use the menus you create... Thx in advance!

Here's my layout page

<router-link exact tag="h3"
    :to="{
        name: 'dashboard.custom',
        params: {
            name: 'main'
        }
    }"
    class="cursor-pointer flex items-center font-normal dim text-white mb-8 text-base no-underline">

    <svg>[Long SVG string]</svg>

    <span class="text-white sidebar-label">{{ __('Dashboard') }}</span>
</router-link>


hello world
@menu("admin")

@if (\Laravel\Nova\Nova::availableDashboards(request()))
    <ul class="list-reset mb-8">
        @foreach (\Laravel\Nova\Nova::availableDashboards(request()) as $dashboard)
            <li class="leading-wide mb-4 ml-8 text-sm">
                <router-link :to='{
                    name: "dashboard.custom",
                    params: {
                        name: "{{ $dashboard::uriKey() }}",
                    },
                    query: @json($dashboard->meta()),
                }'
                exact
                class="text-white no-underline dim">
                    {{ $dashboard::label() }}
                </router-link>
            </li>
        @endforeach
    </ul>
@endif

Answer 1

Thx to leek, I was able to find how to retrieve the menus and build on that.

So my first problem was that I was editing the wrong file. You need to do the following first:

copy the file in nova/resources/views/layout.blade.php and put it in /resources/views/vendor/nova.

After doing this your changes will reflect correctly. I moved all the files in the nova view folder while I was at it.

In side the newly created /resources/views/vendor/nova/layout.blade.php file replace this code:

@foreach (\Laravel\Nova\Nova::availableTools(request()) as $tool)
    {!! $tool->renderNavigation() !!}
@endforeach

with this code:

@php
    $menus = [
        nova_get_menu('admin'),
    ];
@endphp

<section style="width: 100%; position: absolute; top: 60px;">
    <ul class="sidebar-menu">
        <li class="sidebar-header">MAIN NAVIGATION</li>
        <li>
            <a href="/nova">
                <i class="fa fa-dashboard"></i> <span>Dashboard</span></i>
            </a>
        </li>
        @foreach ($menus as $menu)
            @continue(is_null($menu))
                <li>
                    <a href="">
                        <i class="fa fa-dashboard"></i> <span>{{ $menu['name'] }}</span> @if ($menu['menuItems'])<i class="fa fa-angle-left pull-right"></i> @endif
                    </a>
                    @if ($menu['menuItems'])
                        <ul class="sidebar-submenu">
                            @foreach (($menu['menuItems'] ?? []) as $item)
                                <li>
                                    @if ($item['type'] === 'text')
                                    <a href="">{{ $item['name'] }}</a>
                                    @else
                                        <a href="{{ $item['value'] }}"
                                            target="{{ $item['target'] }}"
                                            @if ($item['target'] === '_blank') rel="noopener" @endif><i class="fa fa-circle-o"></i> {{ $item['name'] }}</a>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
        @endforeach
        <li>
            <a href="/nova/logout">
                <i class="fa fa-sign-out"></i> <span>Logout</span></i>
            </a>
        </li>
    </ul>
</section>

Replace "admin" with the slug of your menu You can change the HTML to what ever you want.

I used https://www.jqueryscript.net/menu/Stylish-Multi-level-Sidebar-Menu-Plugin-With-jQuery-sidebar-menu-js.html

And the result is:

You can add more then one menu like this if you need to

@php
    $menus = [
        nova_get_menu('admin'),
        nova_get_menu('user'),
        nova_get_menu('pages'),
        nova_get_menu('configuration'),
        nova_get_menu('store'),
    ];
@endphp

The foreach loop will add them all to your page in the order you put them in the $menus array.

Good luck!