@props(['url' => '#', 'title'=> '', 'color' => '', 'image' => '', 'backgroundColor' => '', 'id'=>'activity_submenu'])

<li class="group menu-item"
    @mouseover="console.log('#{{$id}} .bg_image_submenu');document.querySelector('#{{$id}} .image_submenu').setAttribute('src', '/images/menu/{{$image}}.jpg')
    document.querySelector('#{{$id}} .bg_image_submenu').style.backgroundColor = '{{$backgroundColor}}'
    document.querySelector('#{{$id}} .bg_image_submenu').style.backgroundColor = '{{$backgroundColor}}'"
>
    <a href="{{$url}}" class="relative py-8 flex items-center cursor-pointer justify-between pr-10">
        <div class="absolute bottom-0 left-0 w-full bg-blue bg-opacity-25 h-px"></div>
        <span class="text-blue uppercase text-2xl font-bold hover:">{{ __($title) }}</span>
        <svg class="{{$color}} transform group-hover:translate-x-4 transition-transform " width="17" height="10"
             viewBox="0 0 17 10" fill="none"
             xmlns="http://www.w3.org/2000/svg">
            <path d="M1 5H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M16 5L12.4168 1.41677" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path d="M16 5L12.4168 8.58323" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round"/>
        </svg>
    </a>
</li>