91 lines
3.5 KiB
PHP
91 lines
3.5 KiB
PHP
@props([
|
|
'title' => '',
|
|
'breadcrumbs' => [
|
|
['name' => 'Inicio', 'href' => '/', 'active' => true],
|
|
],
|
|
// props clave
|
|
'align' => 'center', // left | center | right
|
|
'size' => 'md', // sm | md | lg
|
|
'color' => 'grey', // light | grey/gray | dark | primary | secondary | tertiary | quaternary
|
|
|
|
// extras opcionales
|
|
'fullWidth' => false, // true => container-fluid
|
|
'uppercase' => false
|
|
])
|
|
|
|
@php
|
|
$allowedColors = ['light','grey','dark','primary','secondary','tertiary','quaternary'];
|
|
$color = in_array($color, $allowedColors, true) ? $color : 'grey';
|
|
|
|
$align = in_array($align, ['left','center','right'], true) ? $align : 'center';
|
|
|
|
$sizeMap = ['sm' => 'page-header-sm', 'md' => 'page-header-md', 'lg' => 'page-header-lg'];
|
|
$sizeClass = $sizeMap[$size] ?? $sizeMap['md'];
|
|
|
|
$bgColorClass = "bg-color-{$color}";
|
|
$h1Class = in_array($color, ['light','grey']) ? 'text-dark' : '';
|
|
$h1Class .= $uppercase ? ' text-uppercase' : '';
|
|
|
|
$ulClasses = ['breadcrumb','d-block'];
|
|
// alineación visual del breadcrumb
|
|
$ulClasses[] = match ($align) {
|
|
'left' => 'text-md-end',
|
|
'right' => 'text-md-start',
|
|
default => 'text-center',
|
|
};
|
|
if (!in_array($color, ['light','grey'])) $ulClasses[] = 'breadcrumb-light';
|
|
|
|
$containerClass = $fullWidth ? 'container-fluid' : 'container';
|
|
|
|
// Layout de columnas según alineación (titulo y breadcrumbs)
|
|
// Mantiene grid responsivo sin duplicar vistas
|
|
$titleColClass = 'align-self-center p-static order-2 ';
|
|
$crumbColClass = 'align-self-center order-1 ';
|
|
|
|
if ($align === 'center') {
|
|
$titleColClass .= 'col-md-12 text-center';
|
|
$crumbColClass .= 'col-md-12';
|
|
} elseif ($align === 'right') {
|
|
$titleColClass .= 'col-md-8 text-end';
|
|
$crumbColClass .= 'col-md-4';
|
|
} else { // left
|
|
$titleColClass .= 'col-md-8 order-md-1';
|
|
$crumbColClass .= 'col-md-4 order-md-2';
|
|
}
|
|
@endphp
|
|
|
|
<section class="page-header page-header-modern {{ $bgColorClass }} {{ $sizeClass }} m-0">
|
|
<div class="{{ $containerClass }}">
|
|
<div class="row">
|
|
<div class="{{ $titleColClass }}">
|
|
<h1 class="{{ $h1Class }}">{!! $title !!}</h1>
|
|
</div>
|
|
|
|
<div class="{{ $crumbColClass }}">
|
|
<ul class="{{ implode(' ', $ulClasses) }}">
|
|
@foreach ($breadcrumbs as $breadcrumb)
|
|
@php
|
|
$name = $breadcrumb['name'] ?? '';
|
|
$active = (bool)($breadcrumb['active'] ?? false);
|
|
$route = $breadcrumb['route'] ?? null;
|
|
$params = $breadcrumb['params'] ?? [];
|
|
$href = $breadcrumb['href'] ?? null;
|
|
|
|
$routeExists = $route && \Illuminate\Support\Facades\Route::has($route);
|
|
$url = $routeExists ? route($route, $params) : ($href ?: null);
|
|
@endphp
|
|
|
|
<li class="{{ $active ? 'active' : '' }}" @if($active) aria-current="page" @endif>
|
|
@if (!$active && $url)
|
|
<a href="{{ $url }}">{{ $name }}</a>
|
|
@else
|
|
<span>{{ $name }}</span>
|
|
@endif
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|