@props([
    'active'=>false,
    'title'=>'',
    'permission'=>[]
])
@canany($permission)

    <div
        class=" {{$active?'active':''}} 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"
        data-kt-menu-item-placement="bottom-start" data-kt-menu-item-placement-rtl="bottom-end" data-kt-menu-item-toggle="dropdown" data-kt-menu-item-trigger="click|lg:hover">

        <div class="kt-menu-link flex h-full items-center gap-1.5" tabindex="0">
                            <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>
            <span class="kt-menu-arrow">
             <i class="ki-filled ki-down text-xs text-muted-foreground">
             </i>
            </span>
    </div>
        <div class="kt-menu-dropdown kt-menu-default py-2 min-w-[200px]">
        {{$slot}}
    </div>
</div>
@endcan