lernschiff/resources/views/components/layout/nav-item.blade.php

28 lines
939 B
PHP

@props([
'href' => '#',
'icon' => null,
'active' => false,
'badge' => null,
])
@php
$cls = 'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm cursor-pointer transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg-tint ';
$cls .= $active
? 'bg-ink-1 text-bg-base font-semibold shadow-sm'
: 'text-ink-2 hover:bg-bg-soft hover:text-ink-1';
@endphp
<a
href="{{ $href }}"
@if($active) aria-current="page" @endif
{{ $attributes->merge(['class' => $cls]) }}
>
@if($icon)
<x-dynamic-component :component="'heroicon-o-' . $icon" class="w-4 h-4 shrink-0" />
@endif
<span class="flex-1 truncate">{{ $slot }}</span>
@if($badge)
<span class="bg-primary text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold tabular-nums">{{ $badge }}</span>
@endif
</a>