@props([
    'active'=>false,
    'href'=>'#',
    'title'=>'',
    'permission'=>'',
    'icon'=>''
])
@can($permission)
<div class="kt-menu-item flex h-full shrink-0 items-stretch border-b-2 border-b-transparent kt-menu-item-active:border-b-mono kt-menu-item-here:border-b-mono {{$active?'active':''}}">

    <a class="kt-menu-link flex h-full items-center gap-2.5" {{$attributes}}
       href="{{$href}}">
        @if($icon)
            <span class="menu-icon">
               <i class="ki-filled ki-coffee">
               </i>
              </span>
        @endif

            <span class="kt-menu-title text-nowrap text-sm text-foreground kt-menu-item-active:text-mono kt-menu-item-active:font-medium kt-menu-item-here:text-mono kt-menu-item-here:font-medium kt-menu-item-show:text-mono kt-menu-link-hover:text-mono">

             {{ __((string) $title) }}
            </span>
    </a>
</div>
@endcan