74 lines
3.4 KiB
PHP
74 lines
3.4 KiB
PHP
<?php
|
|
// resources/views/livewire/layout/navbar.blade.php
|
|
|
|
use Livewire\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
public function items(): array
|
|
{
|
|
return [
|
|
['href' => '/dashboard', 'label' => 'Home', 'key' => 'home'],
|
|
['href' => '/groups', 'label' => 'Groups', 'key' => 'groups'],
|
|
['href' => '/sash', 'label' => 'Sash', 'key' => 'sash'],
|
|
['href' => '/profile', 'label' => 'Profile', 'key' => 'profile'],
|
|
];
|
|
}
|
|
|
|
public function isActive(string $href): bool
|
|
{
|
|
$path = ltrim(parse_url($href, PHP_URL_PATH) ?? $href, '/');
|
|
|
|
if ($path === '') {
|
|
return request()->is('/');
|
|
}
|
|
|
|
return request()->is($path) || request()->is($path . '/*');
|
|
}
|
|
};
|
|
?>
|
|
|
|
<nav
|
|
class="fixed bottom-0 left-0 right-0 z-50 border-t border-slate-200 bg-white/95 backdrop-blur"
|
|
role="navigation"
|
|
aria-label="Main navigation"
|
|
>
|
|
<div class="mx-auto flex max-w-[430px] items-center justify-around px-2 py-1 pb-[calc(env(safe-area-inset-bottom)+0.25rem)]">
|
|
@foreach ($this->items() as $item)
|
|
@php($active = $this->isActive($item['href']))
|
|
|
|
<a
|
|
href="{{ $item['href'] }}"
|
|
wire:navigate
|
|
aria-current="{{ $active ? 'page' : 'false' }}"
|
|
class="flex min-h-[44px] min-w-[44px] flex-col items-center justify-center gap-0.5 rounded-lg px-3 py-1.5 text-xs transition-colors
|
|
{{ $active ? 'font-semibold text-emerald-700' : 'text-slate-500 active:text-slate-900' }}"
|
|
>
|
|
@if ($item['key'] === 'home')
|
|
<svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M10 20v-6h4v6m5-8.5L12 4l-7 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
@elseif ($item['key'] === 'groups')
|
|
<svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M16 11a4 4 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M6 11a3 3 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M2.5 20a6 6 0 0 1 7.5-4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
<path d="M10 20a7 7 0 0 1 14 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
@elseif ($item['key'] === 'sash')
|
|
<svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
|
</svg>
|
|
@elseif ($item['key'] === 'profile')
|
|
<svg class="h-5 w-5 {{ $active ? 'stroke-[2.5]' : '' }}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M12 12a4 4 0 1 0-0.01 0Z" stroke="currentColor" stroke-width="2"/>
|
|
<path d="M4 21a8 8 0 0 1 16 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
@endif
|
|
|
|
<span>{{ $item['label'] }}</span>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</nav>
|