33. Cómo reutilizar la plantilla Jetstream

Se que no es necesario, pero estaría bien si decides anular un capítulo, saber el porqué.

Llevo dándome cuenta en varios vídeos que bastantes vídeos son re-aprovechados desde Laravel 8, y ojo que no lo digo como crítica a que esto se haga. Pero si que termina llegando un momento que se causa desconcierto, y nos toca asumir que o bien eso está dando problemas como en su momento parece que lo fue con BootStrap, o bien que esto se ha derivado a otro curso.

Sea el motivo que sea, no creo que a ninguno le importe, pero por lo menos entendemos un poco mejor el cambio del guión del curso.

? 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>