Laravel Jetstream

Jetstream proporciona componentes de blade prediseñados con cierta cantidad de clases, para que puedan ser utilizados en cualquier vista de laravel, lo que permite ahorrar tiempo en programar comonentes tales como inputs, tables, etc.

Publicar componentes de Jetstream

Para poder utilizarlos, es conveniente publicarlos y hacerlos visibles en el proyecto de laravel. Abrir la consola o teminal y ejecutar el comando

php artisan vendor:publish --tag=jetstream-views

Así creará los ficheros accesibles en la carpeta resources\views\vendor\jetstream\components

Todos los ficheros que se incluyen es la carpeta creada, son componentes de blade, y serán utilizados como tal.

Para ver como utilizar los componentes de Blade puedes seguir el enlace Laravel Blade Components

Reutilizar plantilla JetStream

Abrir el fichero de plantilla app.blade.php

resources\views\layouts\app.blade.php

Encabezado o header

El fichero app.blade.php hace referente al componente de JetStream navigation-menu.

@livewire('navigation-menu')

Este componente principalmente hay que destacar que tiene una parte de menú para escritorio y otra parte de menú responsivo para móvil.

Por lo tanto hay que tener en cuenta que al modificar una parte para añadir enlaces de menú, también hay que hacerlo en la parte mobile.

<!-- Primary Navigation Menu -->    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
...

<!-- Responsive Navigation Menu -->    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
...

Pero esto se puede simplificar decarando los menús en un array, así solo habrá que añadir en un sitio.

Unificar Menu y Menu móvil

Al principio de la vista, se puede crear un array de arrays con los menú, y así poder utilizarlo en cualquier parte.

@php

$nav_links = [

['name' => 'Dashboard',
'route' => route('dashboard'),
'active' => request()->routeIs('dashboard')],

['name' => 'Prueba',
'route' => '#',
'active' => false]];

@endphp

También se puede utilizar un asterisco en 'active' => request()->routeIs('dashboard.*') para indicar que todas las rutas con ese prefijo se evaluará el botón activo.

Una vez decladado los arrays de menús, utilizarlo con un foreach donde se desee mostrar, indicando en cada parte su valor correspondiente, como el nombre, el enlace o link, y si está activo el item.

@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

Publicar vistas de JetStream

Al utlizar los stack o posiciones de Livewire, que muestran código en ciertas partes de la plantilla o layout, es necesario publiar antes los componentes de Livewire.

Esto se hace con el comando

php artisan vendor:publish --tag=jetstream-views

que copia los ficheros de \vendor\laravel\jetstream\resources\views a resources\views\vendor\jetstream

Modificar Logo

La vista llama al componente de jetstream

<x-jet-application-mark>

Con lo cual hay que modificar el fichero correspondiente para cambiar el logo.

resources\views\vendor\jetstream\components\application-mark.blade.php

Por ejemplo se puede poner el código para imagenes, haciendo referencia a una imagen colocada en una carpeta pública.

<img src="{{ asset('storage\logo\logo.jpg') }}" class="logo"/>

Enlaces en menú

La vista llama al componente de jetstream

<x-jet-nav-link>

Para poner un nuevo enlace en el menú, se utiliza este componente añadiendo la url y entre etiqueta de apertura y cierre, el nombre del enlace.

<x-jet-nav-link  href="{{ route('nombreruta') }}">
Nombre enlace
</x-jet-nav-link>

Pagina principal home

Para que la página de inicio tenga la misma apariencia que el layout utilizado app-layout, hay que indicarlo en el fichero de rutas y en la vista principal.

Modificar enlace home

Para cambiar que al hacer clic en el logotipo vaya a la página pricipal en vez a ruta por defecto welcome, hay que cambiar varias cosas:

1. Ruta: en web.php nombrar la ruta welcome a home.
   Route::get('/', function () {    return view('welcome');})->name('home');
2. Componente correspondiente. En este caso el logotipo se muestra en el componente navigation-dropdwon, donde hay que cambiar la ruta dashboard por home.
   <!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="{{ route('home') }}">
<x-jet-application-mark class="block h-9 w-auto" />
</a></div>
3. Vista welcome, comentar o borrar todo lo que haya, porque ya no se va a usar, y poner el código de la plantilla principal welcome (resources\views\welcome.blade.php), a través de su componente AppLayout (app\View\Components\AppLayout.php).
   <x-app-layout>
   </x-app-layout>

Pero al quitar los enlaces de rutas, vistas y plantillas va a provocar un error, al intentar traer la imagen del usuario no autentificado. En concreto es "trying to get property of non object auth user" View: ...\resources\views\navigation-menu.blade.php

Vamos a ver como solucionar el error

Trying to get property id of non object laravel

El error se da en la parte de código que accede a mostrar la foto de perfil de usuario, y que emite el error Errorexception trying to get property of non object

Solución al error

Para solucionar el error hay que ir donde se está pidiendo la información, en en este caso es el fichero navigation-menu (resources\views\navigation-menu.blade.php).

Hay dos sitios en este fichero donde se llama a la función auth, origen del problema, la primera es en menú de escritorio y la otra en el menú móvil.
Auth::user()->profile_photo_url }}"

Menú principal o Primary Navigation Menu

Al inicio del código se define los menús, para no tener que hacerlo par partida doble en menú de escritorio o desktop, y también en el menú mobile.

@php
    $user_links = [
        [
            'name' => 'Login',
            'route' => route('login'),
            'active' => request()->routeIs('dashboard')
        ],
        [
            'name' => 'Registrarse',
            'route' => route('register'),
            'active' => request()->routeIs('dashboard')
        ]
    ];
@endphp

Después se coloca las directivas condicionales de autenticación de un usuario.

1. Buscar donde aparece el código
   <!-- Settings Dropdown -->
2. Colocar la directiva @auth @else @endauth para condicionar si está el usuario logueado
3. La primera parte de la condición es el propio código de la vista
   La segunda parte de la condición es poner links a la ruta register y login. Para esto se puede reutilizar el código de la vista welcome.
   Con un foreach se muestra los distintos items del menu, definidos previamente en un array:

@auth
                
  ... codigo propio de la vista ... 

@else
 
 <div>
  @foreach ($user_links as $user_link)
   <a href="{{ $user_link['route'] }}" 
    class="text-sm text-gray-700 dark:text-gray-500 underline px-2">
    {{ $user_link['name'] }}
   </a>
  @endforeach

@endauth

Menú responsivo móvil o Responsive Navigation Menu

1. Buscar donde aparece el código
   <!-- Responsive Settings Options -->
2. Colocar la directiva @auth @else @endauth para condicionar si está el usuario logueado
3. La primera parte de la condición es el propio código de la vista
   La segunda parte de la condición es poner links a la ruta register y login.
   Aquí la diferencia con el menú de escritorio anterior, es que se usa un componente de JetStream responsive-nav-link para los links.
   Con un foreach se muestra los distintos items del menu, definidos previamente en un array:

@auth
                
  ... codigo propio de la vista ... 

@else
 
 <div>
  @foreach ($user_links as $user_link)
   <x-jet-responsive-nav-link 
    href="{{ $user_link['route'] }}" 
    :active="$user_link['active']">
     {{$user_link['name']}}
   </x-jet-responsive-nav-link>
  @endforeach

@endauth

Así con las condicionales de la directiva @auth se evita que se ejecute el código que lanza el error.