<div>
    <nav class="navbar navbar-expand-md navbar-dark bg-primary" style="background-color: RGBA(255,255,255,0.4) !important;margin: auto 0 !important">
        <div class="d-flex w-50 order-0">
            <a class="navbar-brand nav-link" style="color:white !important;" href="{{ url('/') }}">ESPACIO XFACIL</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse justify-content-center order-1" id="collapsingNavbar">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/e-learning/areadeaprendizaje"> CAPSULAS DE APRENDIZAJE </a>
                </li>
                <!--<li class="nav-item">
                    <a class="nav-link" href="/e-learning/noticias"> UNIVERSO  NOTICIAS </a>
                </li> -->
                <li class="nav-item">
                    <a class="nav-link" href="/e-learning/espaciocolaborativo"> BIBLIOTECA XFACIL </a>
                </li>
            </ul>
        </div>
        <div class="navbar-text small mt-1 w-50 text-right order-2">
            <ul class="nav navbar-nav pull-right">
                @guest
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}"> MI PERFIL </a>
                    </li>
                @else
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                             {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="z-index: 2000 !important">
                            @if(Auth::user()->nivel == 1)
                                <a class="dropdown-item" href="{{ url('/dashboard') }}" style="color:black">
                                    Panel de control
                                </a>
                            @endif
                            <a class="dropdown-item" href="{{ url('/miperfil') }}" style="color:black">
                                Perfil
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('logout') }}"
                                onclick="event.preventDefault();
                                                document.getElementById('logout-form').submit();" style="color:black">
                                Cerrar sesión
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </div>
                    </li>
                @endguest
            </ul>
        </div>
    </nav>
</div>