67 lines
2.3 KiB
PHP
67 lines
2.3 KiB
PHP
@props(['items' => []])
|
|
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb bg-white shadow-sm p-3 rounded-4 d-flex align-items-center mb-4">
|
|
<li class="breadcrumb-item">
|
|
<a href="{{ route('dashboard') }}"
|
|
class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
|
|
<i data-lucide="home" style="width: 18px; height: 18px;"></i>
|
|
</a>
|
|
</li>
|
|
@foreach($items as $item)
|
|
@if(!empty($item['active']))
|
|
<li class="breadcrumb-item active d-flex align-items-center text-primary fw-bold" aria-current="page">
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-2">
|
|
{{ $item['label'] }}
|
|
</span>
|
|
</li>
|
|
@else
|
|
<li class="breadcrumb-item d-flex align-items-center">
|
|
@if(isset($item['url']))
|
|
<a href="{{ $item['url'] }}" class="text-dark text-decoration-none fw-medium hover-text-primary">
|
|
{{ $item['label'] }}
|
|
</a>
|
|
@else
|
|
<span class="text-muted">{{ $item['label'] }}</span>
|
|
@endif
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ol>
|
|
</nav>
|
|
|
|
<style>
|
|
.breadcrumb-item+.breadcrumb-item::before {
|
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
|
|
vertical-align: middle;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.hover-text-primary:hover {
|
|
color: var(--bs-primary) !important;
|
|
}
|
|
|
|
.bg-primary-subtle {
|
|
background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
|
|
}
|
|
|
|
.border-primary-subtle {
|
|
border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style> |