Menu front end from Voyager

Solved
stefcristian3 ・

Dec 20th, 2022 09:14 AM

I just look over Tony short tutorials, but i don get it really well. My question is if tailwind can be used to have in authenticated-menu(for example) in frontend and if maybe this approach was already made? The goal is to create dynamic menus in place of existing hardcoded in Wave.

bobbyiliev ・

Dec 20th, 2022 09:41 AM

・

Best Answer

Hi there,

Indeed, the Voyager frontend menus were dropped in Wave v2, but you could still re-implement this if you wish.

Currently, the menu files can be found here:

https://github.com/thedevdojo/wave/tree/main/resources/views/themes/tailwind/menus

There are separate menu files for authenticated users and guest users.

Here is an example on how the menus worked with Wave v1 where we used to use the Voyager menus functionality for the frontend as well:

@if(!isset($innerLoop))
<ul class="navbar-nav mr-auto">
@else
<ul class="dropdown-menu">
@endif

@php

    if (Voyager::translatable($items)) {
        $items = $items->load('translations');
    }

@endphp

@foreach ($items as $item)

    @php

        $originalItem = $item;
        if (Voyager::translatable($item)) {
            $item = $item->translate($options->locale);
        }

        $listItemClass = null;
        $linkAttributes =  null;
        $styles = null;
        $icon = null;
        $caret = null;

        // Background Color or Color
        if (isset($options->color) && $options->color == true) {
            $styles = 'color:'.$item->color;
        }
        if (isset($options->background) && $options->background == true) {
            $styles = 'background-color:'.$item->color;
        }

        $linkAttributes =  'class="nav-link"';


        // With Children Attributes
        if(!$originalItem->children->isEmpty()) {
            $linkAttributes =  'class="dropdown-toggle nav-link" data-toggle="dropdown"';
            $caret = '<span class="caret"></span>';

            if(url($item->link()) == url()->current()){
                $listItemClass = 'dropdown active';
            }else{
                $listItemClass = 'dropdown';
            }
        }

        // Set Icon
        if(isset($options->icon) && $options->icon == true){
            $icon = '<i class="' . $item->icon_class . '"></i>';
        }

        if(isset($innerLoop)):
            $linkAttributes =  'class="dropdown-item"';
        endif;

    @endphp

    <li class="{{ $listItemClass }} nav-item">


        <a href="{{ url($item->link()) }}" target="{{ $item->target }}" style="{{ $styles }}" {!! isset($linkAttributes) ? $linkAttributes : '' !!}>
            {!! $icon !!}
            <span>{{ $item->title }}</span>
            {!! $caret !!}
        </a>
        @if(!$originalItem->children->isEmpty())
            @include('theme::menus.tailwind', ['items' => $originalItem->children, 'options' => $options, 'innerLoop' => true])
        @endif
    </li>
@endforeach

</ul>

You can add that to a file called tailwind.blade.php inside the menus directory, and then to include the menu in a specific view, you could use:

{!! menu('authenticated-menu', 'theme::menus.tailwind') !!}

This is all based on the Voyager menus functionality:

Voyager: Menus and Menu Builder

You can use Tailwind CSS in any blade view.

stefcristian3 ・

Dec 20th, 2022 09:51 AM

thnx, and the code that you just exemplify in which file should i add it....because i did not find it?

bobbyiliev ・

Dec 20th, 2022 09:58 AM

The code is just an example. You would need to modify it to add styles.

I’ve mention it above: You can add that to a file called tailwind.blade.php inside the menus directory.

Or you could call the file anything that you prefer. It does not really matter, you can then reference it in the menu function.

Let me know how it goes.

stefcristian3 ・

Dec 20th, 2022 10:06 AM

to wave older version? where this was still implemented? It is still available somewhere?

bobbyiliev ・

Dec 20th, 2022 10:19 AM

No, unfortunately, the old version is no longer available. But it is all based on the Voyager menu functionality.

Let me know if you have any questions.

francescomulassano1 ・

Dec 25th, 2022 05:55 AM

Why was this feature removed in wave2? Isn't it more convenient to have a build system in the backend instead of wiring it in template files?

bobbyiliev ・

Dec 25th, 2022 06:46 AM

The menu feature is still there. You can still use it in your application. It’s just that the base Wave installation does not use it, but there isn’t anything stopping you form using it.

Report
1
francescomulassano1 ・

Dec 25th, 2022 06:59 AM

ok, i've just noticed that you can't create multilevel menu, it's right or i miss something? I don't see a parent relation in the menu builder.

francescomulassano1 ・

Dec 25th, 2022 07:01 AM

ok, i've just noticed that you can't create multilevel menu, it's right or i miss something? I don't see a parent relation in the menu builder.

bobbyiliev ・

Dec 25th, 2022 07:35 AM

The menu builder supports sub-menu items eg: