integración con koneko-vuexy-admin

resources/views/components/header/title-position.blade.php

@@ -0,0 +1,90 @@
+@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>