33. Cómo reutilizar la plantilla Jetstream
En este capítulo de Laravel, aprenderás cómo reutilizar la plantilla predeterminada de Jetstream en diferentes partes de tu proyecto Laravel. Aprenderás cómo utilizar los componentes Blade de Jetstream para incluir la plantilla en diferentes páginas de tu aplicación web, y cómo personalizar los componentes Blade de Jetstream para adaptarlos a tus necesidades. También cubriremos cómo compartir datos y componentes entre las páginas de tu aplicación web y cómo los componentes Blade de Jetstream pueden mejorar la eficiencia y la productividad de tu desarrollo web. Al final de este capítulo, tendrás un conocimiento profundo de cómo reutilizar y personalizar la plantilla de Jetstream en diferentes partes de tu proyecto Laravel.
1 comentarios
Inicia sesión para comentar
Comentarios:
-
Walter hace 8 meses
📌 Reutilizando la plantilla de Jetstream
Veamos cómo convertir la plantilla de Jetstream en nuestra plantilla principal y poder extenderla a todas las vistas de nuestra aplicación.
La plantilla la encontramos en resources/views/layouts/app.blade.php
Podemos eliminar la sección Header de esta plantilla y luego agregamos el resaltado al nav en navigation-dropdown.blade.php agregando la clase shadow de Tailwind:
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100 shadow">
Este documento está dividido en dos secciones:
- Primary Navigation Menu
- Responsive Navigation Menu
📌 Publicamos los componentes que vienen con Jetstream:
php artisan vendor:publish --tag-jetstream-views
Este comando copia todas las vistas que utiliza Jetstream y las coloca en la ruta views/vendor/jetstream/components
📌 Personalizando el logo
La primera sección contiene el componente de logo en application-mark.blade.php donde vemos el logo en formato svg y podemos cambiarlo por el nuestro.
📌 Personalizando los enlaces
Luego de la sección del logo está la sección Navigation Links donde podemos agregar otros enlaces:
<x-jet-nav-link> Prueba </x-jet-nav-link>
Ahora debemos agregar el nuevo enlace también en la sección para móviles Responsive Navigation Menu:
<x-jet-responsive-nav-link> Prueba </x-jet-responsive-nav-link>
Esta forma de agregar (y luego editar) cada nuevo enlace es algo incómoda.
Para evitar hacerlo así agreguemos, en la parte superior de la plantilla, las directivas:
@php $nav_links = [ [ 'name' => 'Dashboard', 'route' => route('dashboard'), 'active' => request()->routeIs('dashboard') ], [ 'name' => 'Prueba', 'route' => route('prueba'), 'active' => request()->routeIs('prueba') ], ]; @endphp
Ahora podemos recorrer este array y generar los enlaces en:
- Primary Navigation Menu:
@foreach ($nav_links as $nav_link) <x-jet-nav-link href="{{ $nav_link['route'] }}" :active="{{ $nav_link['active'] }}" > {{ $nav_link['name'] }} </x-jet-nav-link> @endforeach
- Responsive Navigation Menu:
@foreach ($nav_links as $nav_link) <x-jet-responsive-nav-link href="{{ $nav_link['route'] }}" :active="{{ $nav_link['active'] }}" > {{ $nav_link['name'] }} </x-jet-responsive-nav-link> @endforeach
📌 Cambiando el comportamiento del logo
Damos un nombre a la ruta principal:
Route::get('/', function () { return view('welcome'); })->name('home');
Volvemos a navigation-dropdown.blade.php y en la sección de Logo hacemos que apunte a la ruta home:
<div class="flex-shrink flex items-center"> <a href="{{ route('home') }}"> <x-jet-application-mark class="block h-9 w-auto"/> </a> </div>
📌 Extendamos esta plantilla a la vista principal
Abrimos la vista resources/views/welcome.blade.php, borramos su contenido y extendemos del componente app/View/Components/AppLayout.php
<x-app-layout> </x-app-layout>