➜ Menú de Navegación

🎯 Objetivo

Aprenderás a:

• Implementar un menú de navegación profesional y optimizado en Laravel.
• Mostrar el logo de la empresa utilizando el modelo Profile.
• Listar dinámicamente categorías y servicios mediante una relación uno a muchos entre los modelos Category y Service.
• Integrar datos globales utilizando View Composer.
• Diseñar un pie de página con información del perfil de la empresa.
• Aplicar un diseño responsivo y atractivo con Bootstrap 5.

🛠️ Paso 1: Configurar Rutas y Controlador

Definir la Ruta Principal

En el archivo routes/web.php, define la ruta para la página principal:

use App\Http\Controllers\PublicController;

Route::get('/', [PublicController::class, 'index'])->name('inicio');
Route::get('/empresa', [PublicController::class, 'empresa'])->name('empresa');

Crear el Controlador PublicController

En app/Http/Controllers/PublicController.php, crea el controlador que pasará los datos del perfil a la vista:

namespace App\Http\Controllers;

class PublicController extends Controller
{
    public function index()
    {        
        return view('welcome');
    }
}

🛠️ Paso 3: Implementar View Composer para Categorías y Servicios

Utiliza un View Composer para cargar dinámicamente las categorías y sus servicios en todas las vistas necesarias.

Crear el Service Provider

En app/Providers/ViewComposerServiceProvider.php:

namespace App\Providers;

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use App\Models\Category;
use App\Models\Profile;

class ViewComposerServiceProvider extends ServiceProvider
{
    public function boot()
    {
        //categorias
        $_categories = Category::orderBy('name')->get(['slug','name']);

        //profile
        $_profile = Profile::first();

        View::composer(
            ['layouts.partials.navbar','layouts.partials.footer'],
            function($view) use ($_categories,$_profile){
                $view->with([
                    '_categories' => $_categories,
                    '_profile' => $_profile,
                ]);
            }
        );
    }
}

Registrar el Service Provider

En bootstrap/providers.php, agrega el nuevo proveedor de servicios:

return [
    App\Providers\AppServiceProvider::class,
    App\Providers\ViewComposerServiceProvider::class,
];

🎨 Paso 4: Diseñar el Menú de Navegación con Bootstrap

Crea una vista parcial para el menú de navegación utilizando Bootstrap 5.

Crear la Vista Parcial

En resources/views/layouts/partials/navbar.blade.php:

  <div style="background: #00042a">
    <img src="{{ asset('storage/' . $_profile->logo) }}" alt="{{ $_profile->name }}" width="300" class="img-fluid mx-auto d-block">
  </div>
  <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
      <div class="container">
          <a class="navbar-brand" href="{{ url('/') }}"></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mx-auto">
                  <li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Inicio</a></li>
                  <li class="nav-item"><a class="nav-link" href="{{ route('empresa') }}">Empresa</a></li>

                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                          aria-expanded="false">
                          Servicios
                      </a>
                      <ul class="dropdown-menu">
                        @foreach ($_categories as $_c)
                          <li><a class="dropdown-item" href="{{$_c->slug}}">{{$_c->name}}</a></li>
                        @endforeach                          
                      </ul>
                  </li>

                  <li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Blog</a></li>
                  <li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Contacto</a></li>
              </ul>
          </div>
      </div>
  </nav>

🛠️ Paso 5: Crear la Vista Parcial para el Footer

Crea una vista parcial que contendrá la estructura HTML del pie de página.

Crear la Vista Parcial

En resources/views/layouts/partials/footer.blade.php:

<footer class="bg-dark text-white pt-4">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h2>{{$_profile->name}}</h2>
            </div>
            <div class="col-sm-4">
                <h5>Contacto</h5>
                <ul class="list-unstyled">
                    <li><strong>Teléfono:</strong> {{ $_profile->phone }}</li>
                    <li><strong>Email:</strong> <a href="mailto:{{ $_profile->email }}" class="text-decoration-none text-white">{{ $_profile->email }}</a></li>
                    <li><strong>Dirección:</strong> {{ $_profile->address }}</li>
                </ul>
            </div>
            <div class="col-sm-4">
                <h5>Socialmedia</h5>
                <ul class="list-unstyled">
                    @if ($_profile->facebook!=null)
                    <li><a href="{{ $_profile->facebook }}" target="_blank" class="text-white">Facebook</a></li>    
                    @endif                    
                    <li><a href="{{ $_profile->twitter }}" target="_blank" class="text-white">Twitter</a></li>
                    <li><a href="{{ $_profile->instagram }}" target="_blank" class="text-white">Instagram</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pt-2 pb-1 text-center" style="background: black">
        <p class="text-secondary small">&copy; LaraTech Tecnology | 2025 | Powered By Codea App</p>
    </div>
</footer>

🛠️ Paso 6: Integrar el Footer en el Layout Principal

Incluye la vista parcial del pie de página en tu layout principal para que se muestre en todas las páginas.

Modificar la Vista Principal

En resources/views/layouts/apps.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>
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    @include('layouts.partials.navbar')
    <main>
        @yield('content')
    </main>
    @include('layouts.partials.footer')
</body>
</html>

Vista Final

✅ Beneficios de esta Implementación

• Optimización SEO: Estructura clara con enlaces internos bien definidos.
• Carga Dinámica: Actualización automática de categorías y datos del perfil desde la base de datos.
• Reutilización de Componentes: Uso de vistas parciales para mantener el código limpio y modular.
• Diseño Responsivo: Menú y pie de página adaptados a dispositivos móviles y de escritorio con Bootstrap 5.