3

Tengo un menú de navegación con boostrap, uso el motor de plantillas blade y tengo jquery +boostrap 4 en el layout.

El header que tengo es este

    <nav class="nav-menu d-none d-lg-block">
        <ul>
            <li><a id="home" href="{{ route('front.user.pages.home') }}">Inicio</a></li>
            <li><a id="perfil-usuario" href="{{ route('front.user.profile.show') }}">Perfil usuario</a></li>
        </ul>
    </nav><!-- .nav-menu -->

    <a href="#about" class="get-started-btn scrollto">Empieza ya!</a>

</div>

Y lo que intento hacer es que cuando el usuario haga click en cada uno de los botones como puede ser "Inicio" o "Perfil usuario" que no deja de ser un link a una ruta, cuando cargue la página deje el botón marcado como tal.

La única forma que lo he conseguido que seguramente sea la "peor" en cuanto a mantenimiento es mirando la "URI" que recibo y si la uri coincide con algunos de los botones, mediante jquery le añado la clase "active"

Algo asi.

    @php
    if ($_SERVER['REQUEST_URI'] === '/perfil-usuario') {
         $("#perfil-usuario").addClass("active");
    }
    @endphp
2
  • 1
    No creo que sea la "peor" forma... pero puedes comprobar la ruta (route) con el helper url()->current(), ej. route('front.user.pages.home') === url()->current() ? 'active' : ''... lo puedes meter en una función etc.... Commented el 13 may. 2020 a las 15:10
  • Pero entonces el código que tengo seria tal como este y abajo incluiría un trozo de código que comprueba la url? gracias
    – ilernet
    Commented el 13 may. 2020 a las 15:18

1 respuesta 1

1

No haría la comprobación en el ejemplo que haz puesto, no es muy óptimo.

Te dejo una posible solución, donde te creas una función global y luego en tu código (blade), pasas la ruta:

BLADE:

<li class="{{ checkCurrentRouteByName(route('front.user.pages.home')) ? 'active' : '' }}">
    <a id="home" href="{{ route('front.user.pages.home') }}">
        Inicio
    </a>
</li>

PHP:

<?php

function checkCurrentRouteByName(string $route): bool
{
    return $route === url()->current();
}
1
  • Muchas gracias, así lo he implementado.
    – ilernet
    Commented el 15 may. 2020 a las 8:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.