laravel-breeze замена nav-link в navigation на dropdown/dropdown-link

я пытаюсь немного изменить окно навигации, чтобы вместо nav-link были dropdown и dropdown-link. У меня вроде бы получилось это сделать, но я не могу включить подсветку раздела в навигации, если он выбран. Вот как я изменил navigation links:

<!-- Navigation Links -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">
                <x-dropdown :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                    <x-slot name="trigger">
                        <button
                            class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
                            {{ __('Dashboard') }}
                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                          clip-rule="evenodd"/>
                                </svg>
                            </div>
                        </button>
                    </x-slot>
                    <x-slot name="content">
                        <x-dropdown-link :href="route('dashboard')">
                            {{ __('Dashboard') }}
                        </x-dropdown-link>
                        <x-dropdown-link :href="route('dashboard')">
                            {{ __('Dashboard') }}
                        </x-dropdown-link>
                        <x-dropdown-link :href="route('dashboard')">
                            {{ __('Dashboard') }}
                        </x-dropdown-link>
                    </x-slot>
                </x-dropdown>
            </div>

Вот как я пытаюсь изменить файл dropdown.blade.php. Просто пытаюсь перетащить включение активации из файла nav-link.blade.php.

        @props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white', 'active'])
    
    @php
    switch ($align) {
        case 'left':
            $alignmentClasses = 'origin-top-left left-0';
            break;
        case 'top':
            $alignmentClasses = 'origin-top';
            break;
        case 'right':
        default:
            $alignmentClasses = 'origin-top-right right-0';
            break;
    }
    
    switch ($width) {
        case '48':
            $width = 'w-48';
            break;
    }
    $classes = ($active ?? false)
                ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
                : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
    @endphp
    
    <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false" {{ $attributes->merge(['class' => $classes]) }} >
        <div @click="open = ! open">
            {{ $trigger }}
        </div>
    
        <div x-show="open"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
                style="display: none;"
                @click="open = false">
            <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
                {{ $content }}
            </div>
        </div>
    </div>

Как я вижу, по инструменту разработчика в браузере, в этой строке

<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false" {{ $attributes->merge(['class' => $classes]) }} >

У меня не применяется

{{ $attributes->merge(['class' => $classes]) }}

Верней применяется, но как-то странно, просто добавляется ссылка в свойства div.

<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false" href="http://localhost/dashboard">

Подскажите пожалуйста, что я делаю не так.