@props(['submenu' => false, 'activeClass', 'route', 'title', 'icon', 'items' => []])
<li class="group {{ $activeClass }}">
    <a href="{{ $route }}" class="sidebar-link {{ $submenu ? 'sidebar-dropdown-toggle':'' }}">
        <div class="flex items-center gap-[22px]">
            <x-svg-icon icon="{{ $icon }}" class="sidebar-icon-svg" />
            <span class="sidebar-link-title">{!! $title !!}</span>
        </div>
        @if($submenu)
        <x-svg-icon icon="icon-dropdown" class="sidebar-arrow-svg" />
        @endif
    </a>
    <!-- sub menu  -->
    @if($submenu)
    <ul class="sidebar-sub-menu text-sm-medium">
        @foreach($items as $item)
        @if($item['show'])
        <li class="sidebar-sub-menu-list {{ $item['class'] }}">
            <a href="{{ $item['route'] }}" class="sidebar-sub-menu-link {{ $item['class'] }}">
                {!! $item['title'] !!}
            </a>
        </li>
        @endif
        @endforeach
    </ul>
    @endif
</li>