<template>

  <nav class="navbar navbar-expand-md navbar-light " style="background-color:#BB8800;">
    <div class="container">
      <div class="row">
        <div class="col">

          <button class=" navbar-toggler" type="button" id="toggle-menu" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" v-on:click="toggle()">

            <span class=" navbar-toggler-icon x"></span>
            <p>Menú</p>
          </button>

          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <router-link to="/" class="nav-item nav-link"><a> Inicio</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/convocatoria" class="nav-item nav-link"><a>Convocatoria</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/costos" class="nav-item nav-link"><a>Costos de Inscripción</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/fechas" class="nav-item nav-link"><a>Fechas importantes</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/mesas" class="nav-item nav-link"><a>Mesas Temáticas</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/registro" class="nav-item nav-link"><a>Registro</a></router-link>
              </li>
              <li class="nav-item">
                <router-link to="/login" class="nav-item nav-link"><a>Iniciar Sesión</a></router-link>
              </li>
            </ul>

          </div>

        </div>
      </div>
    </div>

  </nav>

</template>

<script>
export default {
    methods: {
        toggle: function() {
            let element = document.getElementById('navbarNav')
            element.classList.toggle('block')
            element.classList.add('mystyle')
        },
    },
}
</script>

<style scoped>
.mystyle {
    text-align: left;
}

.block {
    display: block;
}
a {
    max-height: 100%;
}
.menu {
    background-color: #bb8800;
}

.menu nav ul {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
}

.menu nav ul div {
    display: flex;
    justify-content: space-between;
}

.menu nav ul li {
    list-style: none;
}

.menu nav ul li a {
    display: block;
}

a {
    color: white;
    transition: 0.5s;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

a:hover {
    background-color: #936900;
    color: white;
}

.active {
    background-color: #936900;
}
</style>