PortaFront/src/components/nav2.vue

<template>
  <div class="divMaster azulUnam row d-flex justify-content-center">
    <div class="col-10 offset-1">
      <nav class="navbar navbar-expand-sm navbar-dark  ">
        <button
          @click="method()"
          class="navbar-toggler col-5"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo03"
          aria-controls="navbarTogglerDemo03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon blanco d-flex"></span>
          <!-- <span class="mx-2"> spa</span> -->
        </button>

        <div class="collapse navbar-collapse " id="navbarTogglerDemo03">
          <ul
            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0"
          >
            <li class="nav-item">
              <a class="nav-link text-white" @click="comite()"
                >Comité Editorial</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" @click="lineamientos()"
                >Política Editorial y Lineamentos</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" @click="proceso()"
                >Proceso Editorial y Organismos</a
              >
            </li>

            <li class="nav-item">
              <a class="nav-link text-white" @click="puntos()"
                >Puntos de Venta</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" @click="contacto()">Contáctanos</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
export default {
  data() {
    return {
      isExist: true,
      libros: [],
      nombre: ""
    };
  },
  methods: {
    comite() {
      this.$router.push("/comite").catch(() => {
        location.reload();
      });
    },
    lineamientos() {
      this.$router.push("/lineamientos").catch(() => {
        location.reload();
      });
    },
    proceso() {
      this.$router.push("/proceso").catch(() => {
        location.reload();
      });
    },
    puntos() {
      this.$router.push("/puntos").catch(() => {
        location.reload();
      });
    },
    contacto() {
      this.$router.push("/contacto").catch(() => {
        location.reload();
      });
    },
    method() {
      this.isExist = !this.isExist;
    }
  },
  async created() {
    let path = `${config.api}`;
    try {
      let libros = await axios.get(`${path}/getLibros`);
      this.libros = await libros.data.data;
    } catch (error) {
      console.log(`Error ${error}`);
    }
  },
  computed: {
    buscarLibro: function() {
      return this.libros.filter(item =>
        item.titulo.toLowerCase().includes(this.nombre.toLowerCase())
      );
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.divMaster {
  /* max-width: 1280px; */
  height: auto;
  margin: 0 auto;
}
nav {
  padding: 0.5rem 0;
}

.azulUnam {
  background-color: #1e3c70;
}

.doradoUnam {
  background-color: #bb8800;
}

.dropdown-item:hover {
  background-color: #1e3c70;
}

.dropdown-itemBusqueda:hover {
  background-color: #bb8800;
  color: white;
}

.nav-link:focus {
  background-color: #bb8800;
  border-radius: 1rem;
}

.nav-link:hover {
  background-color: #bb8800;
  color: white;
  border-radius: 0.2rem;
}

.nav-link {
  transition: 0.3s;
  font-size: 15px;
}

.dropdown-item {
  padding: 0.3rem 1rem;
}

.menuText {
  display: none;
}

/* 
.dropdown-menu {
  width: 10% !important;
} */

.dropdown {
  position: relative;
  display: inline-block;
  height: auto;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* padding: 12px 16px; */
  top: 0.8rem;
  left: -10rem;
  display: block;
}
.rescont {
  z-index: 2;
}

.list-group-item {
  padding: 12px 16px;
}

.navbar-toggler {
  font-size: 1rem;
}
.navbar-dark .navbar-toggler {
  border: none;
}

@media (max-width: 450px) {
  .menuText,
  .buscador {
    display: block !important;
  }

  .dropdown-menu {
    width: 80vw !important;
  }
  .nav-link {
    font-size: 20px;
    margin-top: 1rem;
  }
}
</style>