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.