mainMenu fix

package-lock.json

@@ -10968,36 +10968,6 @@
       }
     },
     "vue-loader-v16": {
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-=======
->>>>>>> origin
-=======
->>>>>>> origin
       "version": "npm:vue-loader@16.0.0-beta.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
       "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
@@ -11016,38 +10986,13 @@
           "dev": true,
           "optional": true,
           "requires": {
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> origin
->>>>>>> origin
-=======
->>>>>>> origin
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-<<<<<<< HEAD
-<<<<<<< HEAD
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
           "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-=======
-<<<<<<< HEAD
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-=======
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
->>>>>>> origin
->>>>>>> origin
-=======
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
->>>>>>> origin
           "dev": true,
           "optional": true,
           "requires": {
@@ -11079,20 +11024,6 @@
           "dev": true,
           "optional": true
         },
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-<<<<<<< HEAD
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-=======
->>>>>>> origin
-=======
->>>>>>> origin
         "loader-utils": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
@@ -11104,13 +11035,6 @@
             "emojis-list": "^3.0.0",
             "json5": "^2.1.2"
           }
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> origin
->>>>>>> origin
-=======
->>>>>>> origin
         },
         "supports-color": {
           "version": "7.2.0",

src/components/Header.vue

@@ -25,6 +25,8 @@
                 </div>
             
             </div>
+            <MainMenu></MainMenu>
+
 
         </header>
 
@@ -32,18 +34,14 @@
 </template>
 
 <script>
+import MainMenu from './MainMenu'
 
 export default {
-    data() {
+components: {
-        return {
+        MainMenu,
-            
-        }
-    },
-    methods: {
 
     }
 }
-
 </script>
 <style scoped>
 

src/components/MainMenu.vue

@@ -12,24 +12,26 @@
                         :backdrop-variant="variant"
                         backdrop
                         shadow
+                        bg-variant="white" text-variant="primary"
                         >
-                            <div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
+                            <div class="px-3 mt-3 pt-2 d-flex align-items-center profi-main-text-sty">
                                 <font-awesome-icon icon="user" class="mr-2" />        
                                 <a href="#" class="text-decoration-none">
                                     <h5 class="my-auto">Iniciar sesión</h5>
                                 </a>
                             </div>
+                        <hr class="mx-3 mb-3">
                             
-                            <h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
+                            <h6 class="px-3 pt-4">MAIN LOREM IPSUM</h6>
-
+                            <hr class="mx-3 mb-2">
                             <ul class="px-3">
                                 <li v-for="item in items" :key="item.mensaje">
                                     <a href="#"> {{ item.mensaje }} </a>
                                 </li>
                             </ul>
 
-                            <h6 class="px-3 my-4">CONFIGURACIÓN</h6>
+                            <h6 class="px-3 mt-5">CONFIGURACIÓN</h6>
-
+                            <hr class="mx-3 mb-2">
                             <ul class="px-3">
                                 <li v-for="item in configuracion" :key="item.mensaje">
                                     <a href="#"> {{ item.mensaje }} </a>
@@ -89,11 +91,14 @@ export default {
     color: rgba(255, 255, 255, 0.7)!important;
 }
 .profi-main-text-sty, .profi-main-text-sty a {
-    color: black!important;
+    color: #212529!important;
 }
 .profi-main-text-sty a:hover{
     color:gray!important;
     transition: 0.2s;
+}
+.b-sidebar-header-custom {
+    
 }
 ul li {
     list-style: none;
@@ -101,7 +106,7 @@ ul li {
 }
 ul li a {
     text-decoration: none;
-    color: black!important;
+    color: #212529!important;
 }
 ul li a:hover {
     color: rgba(0, 0, 0, 0.6)!important;

src/components/SearchResultsPage.vue

@@ -1,82 +0,0 @@
-<template>
-<div class="container my-5">
-  <h4><b>Resultados para "{{productResult[0].searchText}}"</b></h4>
-  <p>Hay {{productResult[0].numberFound}} productos</p>
-  <div class="my-4 d-flex justify-content-sm-start justify-content-center flex-wrap">
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img v-bind:src="productResult[0].img" class="card-img-top" style="height:250px" alt="...">
-        <div class="card-body text-center" maxlength="5">
-            <p class="card-text">{{productResult[0].description}}</p>
-            <span><b>${{productResult[0].price}}</b></span>
-        </div>
-    </div>
-
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img v-bind:src="productResult[1].img" class="card-img-top" style="height:250px" alt="...">
-        <div class="card-body text-center">
-            <p class="card-text">{{productResult[1].description}}</p>
-            <span><b>${{productResult[1].price}}</b></span>
-        </div>
-    </div>
-
-    <div class="card g-card-sty mr-4 mb-3" style="width: 12rem;">
-        <img v-bind:src="productResult[2].img" class="card-img-top" style="height:250px" alt="...">
-        <div class="card-body text-center">
-            <p class="card-text">{{productResult[2].description}}</p>
-            <span><b>${{productResult[2].price}}</b></span>
-        </div>
-    </div>
-
-  </div>
-  <p>Mostrando {{productResult[0].numberFound}} de {{productResult[0].totalBookCategory}} artículo(s)</p>
-</div>
-</template>
-
-<script>
-export default {
-    data(){
-        return {
-            productResult: [
-                {
-                searchText: "Lorem ipsum",
-                numberFound: 3,
-                description: "Some quick example text to build on the card title and...",
-                price: 180,
-                totalBookCategory: 28,
-                img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg'
-                },
-                  {
-                searchText: "Lorem ipsum",
-                numberFound: 3,
-                description: "2 Some quick example text to build on the card title and...",
-                price: 190,
-                totalBookCategory: 28,
-                img: 'https://m.media-amazon.com/images/I/51HdyT9COEL.jpg'
-                },
-                  {
-                searchText: "Lorem ipsum",
-                numberFound: 3,
-                description: "3 Some quick example text to build on the card title and...",
-                price: 200,
-                totalBookCategory: 28,
-                img: 'https://upload.wikimedia.org/wikipedia/commons/8/8e/Lenin_book_1902.jpg'
-                }
-            ]
-        }
-    }
-}
-</script>
-
-<style scoped>
-.g-card-sty {
-    -webkit-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    -moz-box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-    box-shadow: 3px 3px 6px 0.2px rgba(0,0,0,0.2);
-}
-  p {
-      text-overflow: ellipsis;
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden; 
-    } 
-</style>

src/view/Home.vue

@@ -1,9 +1,9 @@
 <template>
 <div>
 <Header></Header>
-
+<div class="container my-5">
-<SearchResultsPage></SearchResultsPage>
+  <h1 class="text-center">Home</h1>
-
+</div>
 <Footer></Footer>
 </div>
 </template>
@@ -11,14 +11,13 @@
 <script>
 
 import Header from '../components/Header'
-import SearchResultsPage from '../components/SearchResultsPage'
 import Footer from '../components/Footer'
         
 export default {
 components: {
         Header,
-        SearchResultsPage,
+        Footer,
-        Footer
+
     }
 }
 </script>