@props([
'active' => false,
'activeIcon' => null,
'badge' => null,
'badgeColor' => null,
'grouped' => false,
'last' => false,
'first' => false,
'icon' => null,
'shouldOpenUrlInNewTab' => false,
'isWireNavigate' => false,
'url',
])
$active,
])
>
isSidebarCollapsibleOnDesktop())
x-data="{ tooltip: false }"
x-effect="
tooltip = $store.sidebar.isOpen
? false
: {
content: @js($slot->toHtml()),
placement: document.dir === 'rtl' ? 'left' : 'right',
theme: $store.theme,
}
"
x-tooltip.html="tooltip"
@endif
@class([
'fi-sidebar-item-button relative flex items-center justify-center gap-x-3 rounded-lg px-2 py-2 text-sm outline-none transition duration-75 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-white/5 dark:focus:bg-white/5',
'bg-gray-100 dark:bg-white/5' => $active,
])
>
@if (filled($icon))
! $active,
'text-primary-600 dark:text-primary-400' => $active,
])
/>
@elseif ($grouped)
@endif
isSidebarCollapsibleOnDesktop())
x-show="true"
x-transition:enter="lg:transition lg:delay-100"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
@endif
@class([
'fi-sidebar-item-label flex-1 truncate',
'text-gray-700 dark:text-gray-200' => ! $active,
'text-primary-600 dark:text-primary-400' => $active,
'font-semibold' => ! $grouped,
'font-medium' => $grouped,
])
>
{{ $slot }}
@if (filled($badge))
isSidebarCollapsibleOnDesktop())
x-show="true"
x-transition:enter="lg:transition lg:delay-100"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
@endif
>
{{ $badge }}
@endif