nav corregido

src/App.vue

@@ -1,21 +1,13 @@
 <template>
   <div id="app">
-    <Header />
     <router-view></router-view>
-    <Footer />
   </div>
 </template>
 
 <script>
-import Header from "./esteticas/header.vue";
-import Footer from "./esteticas/footer.vue";
 
 export default {
-  name: "App",
-  components: {
-    Header,
-    Footer
-  }
+  name: "App"
 };
 </script>
 

src/components/home.vue

@@ -1,5 +1,24 @@
 <template>
   <div>
-    <h1>esta es la pagina home</h1>
+    <Header />
+    <Nav />
+    <router-view></router-view>
+    <Footer />
   </div>
 </template>
+
+<script>
+import Header from "./../esteticas/header.vue";
+import Nav from "./../esteticas/navPrincipal.vue";
+import Footer from "./../esteticas/footer.vue";
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    Nav,
+    
+    Footer
+  }
+};
+</script>

src/esteticas/navPrincipal.vue

@@ -0,0 +1,174 @@
+<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"
+            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 "
+              ><a> Inicio</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><a>Presentacion</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><a>Libros</a></router-link
+            >
+          </li>
+          <li class="nav-item dropdown">
+            <router-link to="#" class="nav-item nav-link"
+              ><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>