PortaFront/src/components/navPrincipal.vue

<template>
  <nav
    class="navbar navbar-expand-md navbar-light "
    style="background-color:#BB8800;"
  >
    <div class="container">
      <nav class=" ">
        <button
          class=" navbar-toggler van text-whitee btn-sm"
          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 m-1 text-white"
            style="color:white !important;"
          ></span>
          Menú
        </button>
      </nav>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto  mt-0 mt-lg-0">
          <li class="nav-item dropdown">
            <router-link to="#" class="nav-item nav-link text-white "
              ><a> Inicio</a></router-link
            >
          </li>
          <li class="nav-item dropdown">
            <router-link to="#" class="nav-item nav-link text-white"
              ><a>Presentacion</a></router-link
            >
          </li>
          <li class="nav-item dropdown">
            <router-link to="#" class="nav-item nav-link text-white"
              ><a>Libros</a></router-link
            >
          </li>
          <li class="nav-item dropdown">
            <router-link to="#" class="nav-item nav-link text-white"
              ><a>Difusión Editorial</a></router-link
            >
          </li>
        </ul>
        <form class="form-inline  my-0 my-lg-0">
          <div class="input-group input-group-sm mb-0">
            <input
              type="text"
              class="form-control reIzq "
              placeholder="Buscar"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
            />
            <div class="input-group-append reDer bg-white">
              <button class="btn  my-0" type="submit">
                <svg
                  width="1em"
                  height="1em"
                  viewBox="0 0 16 16"
                  class="bi bi-search"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
        </form>
      </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>
.reDer {
  border-top-right-radius: 20px 20px !important;
  border-bottom-right-radius: 20px 20px !important;
}
.reIzq {
  border-top-left-radius: 20px 20px !important;
  border-bottom-left-radius: 20px 20px !important;
}
body {
  overflow-x: hidden;
}
.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 0rem;
}

.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: #1e3c70;
  color: white;
}

.active {
  background-color: #936900;
}

.van {
  display: flex;
  align-items: center;
  justify-content: center;
}
.x {
  color: white;
}

@media (min-width: 768px) {
  .van {
    display: none;
  }
}
</style>