33. Cómo reutilizar la plantilla Jetstream

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>