0

Necesito realizar un inicio de sesion, el cual ya hice. Al momento de hacer responsivo el nav bar donde tengo algunos items, quiero que cuando el usuario inicie sesión muestre el nombre del usuario y que este despliegue la opción de cerrar sesión y que al momento de que no se encuentre loggeado solo aparezca el botón iniciar sesión. Ya lo tengo todo montado pero al momento de ponerlo en el nav, el desplegable de cerrar sesión no funciona de ninguna forma, lo he intentado solucionar de varias formas, pero al hacerlo este se desaparece del nav bar. Ya no se que mas hacer. iNecesito su ayuda y conocimiento!.

Uso HTML, Bootstrap con CSS y Laravel.

Dejo el código completo del nav bar para que le echen un vistazo:

<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
  <div class="container px-5">
    <a class="navbar-brand fw-bold" href="#page-top">
      <img src="assets/logo.png" alt="Texto alternativo de la imagen" width="200" height="80">
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
      aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <strong>Menu</strong>
      <i class="bi-list"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Inicio</strong></a></li>
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Oversize</strong></a></li>
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Zapatos</strong></a></li>
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Pines</strong></a></li>
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Marcas</strong></a></li>
        <li class="nav-item"><a class="nav-link me-lg-3" href=""><strong>Outlet</strong></a></li>
      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="navbar-nav ms-auto btn btn-primary rounded-pill px-3 mb-2 mb-lg-0">
        <!-- Authentication Links -->
        @guest
        @if (Route::has('login'))
        <li class="nav-item ">
          <a class="nav-link bi bi-person-circle me-2 color-white" href="{{ route('login') }}">{{ __('Login') }}</a>
        </li>
        @endif

        @if (Route::has('register'))
        <li class="nav-item ">
          <a class="nav-link bi bi-box-arrow-up-right me-2 color-white" href="{{ route('register') }}">{{ __('Register')
            }}</a>
        </li>
        @endif
        @else
        <li class="nav-item dropdown ">
          <a id="navbarDropdown" class="nav-link dropdown-toggle bi bi-person-circle me-2 text-white" href="#"
            role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
            {{ Auth::user()->name }}
          </a>

          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
            <a class="dropdown-item bi bi-door-open me-2 color-white" href="{{ route('logout') }}" onclick="event.preventDefault();
                                         document.getElementById('logout-form').submit();">
              {{ __('Logout') }}
            </a>

            <form id="logout-form" action="{{ route('logout') }}" method="POST"
              class="d-none bi bi-door-open me-2 color-white">
              @csrf
            </form>
          </div>
        </li>
        @endguest
      </ul>
    </div>
  </div>
</nav>

Lo he intentado todo he incluso e cambiando de Bootstrap 5 al 4 y tampoco funciona.

4
  • Acomodé algunas cosas que se veían raro en tu pregunta. No soy experto en laravel así que espero que consigas respuesta.
    – DABL03
    Commented el 28 mar. a las 2:19
  • @DABL03 tus modificaciones son buenas, y las aceptaría pero tengo un detalle. Si el código no es ejecutable dentro del fiddle, no lo agregues ahi. El fragmento está diseñado para que se pueda ejecutar javascript, html y css, además de mostrar el resultado. Al ser esto laravel (PHP), requiere de un servidor como tal para ejecutarse. Mejora tu edición, quitando el código hacia afuera, y quedará mejor visualmente.
    – Excorpion
    Commented el 28 mar. a las 4:51
  • hola, a todos he logrado corregir el codigo y ya funciona a la perfeccion, muchisimas gracias a los que aportaron con su comentario Commented el 28 mar. a las 5:18
  • @DavidSanchez, si has encontrado la solución, te invito a escribir una respuesta detallando la solución encontrada. Esto, para que si alguien tiene el mismo error que tú, se fije en ello y pueda solucionarlo 😉
    – Excorpion
    Commented el 28 mar. a las 14:13

1 respuesta 1

0

Seria mas sencillo instalar el logging que laravel trae por defecto: composer require laravel/ui y luego php artisan ui:auth Este es la basico, pero en la documentacion explica como instalar mediante fronted de angular, vuejs y otras tecnologias, las cuales crean todo y asi evitar estar batanllando en algo ya creado. Es una opcion espero te pueda servir de ayuda.

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.