@props(['name', 'routename', 'icon'])
<li class="mb-2 group {{ $routename == request()->route()->getName() ? 'active' : '' }}">
    <a wire:navigate href="{{ route($routename) }}"
        class="flex items-center justify-between shadow-xl py-2 px-4 text-tx-primary border-b border-b-secondary-variant hover:bg-secondary-variant hover:text-gray-100 rounded-lg group-[.active]:bg-secondary-variant group-[.active]:text-white group-[.selected]:bg-secondary-variant group-[.selected]:text-gray-100"
        :class="{ 'justify-center items-center': !openSidebar }">
        <span>
            <i class="{{ $icon }} text-lg xl:text-2xl"></i>
        </span>
        <span class="text-base xl:text-lg" :class="{ 'lg:hidden': !openSidebar }">{{ $name }}</span>
    </a>
</li>
