48. Cómo volver funcional el menu de Tailwind


4 comentarios

Inicia sesión para comentar

Comentarios:

  • Walter

    Walter hace 1 año

    ? 3° Editamos el componente Navigation.php

    Lo encontramos en /app/Http/Livewire/Navigation.php:

     

    <?php
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use App\Models\Category;
    
    class Navigation extends Component
    {
      public function render()
      {
        $categories = Category::all();
    
        return view('livewire.navigation', compact('categories'));
      }
    }
    

     

    ? Volvemos a la vista del componente y cambiamos los enlaces principales por las categorías:

     

    @foreach ($categories as $category)
    	<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white 
    	px-3 py-2 rounded-md text-sm font-medium">{{ $category->name }}</a>
    @endforeach

     

    ? Hacemos lo mismo con el menú mobile:

     

    @foreach ($categories as $category)
    	<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white 
    	block px-3 py-2 rounded-md text-base font-medium">{{ $category->name }}</a>
    @endforeach

     

  • Walter

    Walter hace 1 año

    ? 2° Hacemos funcional las opciones del menú

    Editamos el archivo /resources/views/livewire/navigation.blade.php:

     

    ? Hacemos que el logo apunte a la página principal, cambiamos el div por un anchor:

    <a href="/" class="flex flex-shrink-0 items-center">
    <img class="block h-8 w-auto lg:hidden" src="./images/logo.png" alt="logo">
    <img class="hidden h-8 w-auto lg:block" src="./images/logo.png" alt="logo">
    </a>

     

    ? Mostramos los íconos de mensajes y foto de perfil sólo si estamos autenticados, sino mostramos los enlaces para Login y Register:

    @auth
        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            {{-- botón notificaciones --}}
            <button type="button" ...
            </button>
            <!-- Profile dropdown -->
            <div class="relative ml-3" x-data="{ open: false }"> ...
            </div>
        </div>
    @else
        <div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 
            hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 
            hover:text-white px-3 py-2 rounded-md text-sm font-medium">Register</a>
        </div>
    @endauth

     

    ? Habilitamos el botón Sign out encargado de cerrar sesión:

    <form method="POST" action="{{ route('logout') }}">
    	@csrf
    	<a href="{{ route('logout') }}" 
    		class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
    		role="menuitem" tabindex="-1" id="user-menu-item-2"
    		onclick="event.preventDefault(); this.closest('form').submit();"
    	>Sign out</a>
    </form>

     

    ? Habilitamos los enlaces de Login y Register:

    <a href="{{ route('login') }}" class="text-gray-300 hover:bg-gray-700 
    	hover:text-white px-3 py-2 rounded-md text-sm font-medium"
    >Login</a>
    <a href="{{ route('register') }}" class="text-gray-300 hover:bg-gray-700 
    	hover:text-white px-3 py-2 rounded-md text-sm font-medium"
    >Register</a>
    

     

    ? Editamos la foto de perfil:

    <img class="h-8 w-8 rounded-full"
    	src="{{ auth()->user()->profile_photo_url }}"
    	alt="{{ auth()->user()->name }}">

     

    ? Editamos el link de Your Profile y eliminamos el de Setting:

    <a href="{{ route('profile.show') }}" 
    	class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" 
    	role="menuitem" tabindex="-1"
    	id="user-menu-item-0"
    >Your Profile</a>

     

  • Walter

    Walter hace 1 año

    ? 1° Comenzamos a trabajar en el Frontend

    Extenderemos la plantilla principal a la vista que se muestra cuando ingresamos a nuestro proyecto.

    Vemos esa ruta en el archivo /routes/web.php:

    Route::get('/', function() {
    	return view('welcome');
    });

     

    ? La plantilla principal de la cual queremos extender a través de los componentes de Blade se encuentra en /app/View/Components/AppLayout.php:

     

    <php
    namespace App\View\Components;
    
    use Illuminate\View\Component;
    
    class AppLayout extends Component
    {
    	public function render()
    	{
    		return view('layouts.app');
    	}
    }

     

    Como vemos la función de este componente es renderizar la vista que se encuentra en /resources/views/layouts/app.blade.php:

     

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
    
        <title>{{ config('app.name', 'Laravel') }}</title>
    
        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
    
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    
        <!-- Styles -->
        @livewireStyles
    </head>
    
    <body class="font-sans antialiased">
        <x-jet-banner />
    
        <div class="min-h-screen bg-gray-100">
    
            @livewire('navigation')
    
            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    
        @stack('modals')
    
        @livewireScripts
    </body>
    
    </html>

     

    ? Extendemos la plantilla principal en la vista welcome:

     

    <x-app-layout>
    </x-app-layout>

     

  • Luis Josué

    Luis Josué hace 1 año

    Hola Víctor
    ¿Cómo puedo cambiar el color del nav gratuito de Taildwind?