mainMenu fix

Reviewed-on: #6

package-lock.json

@@ -10968,30 +10968,6 @@
       }
     },
     "vue-loader-v16": {
-<<<<<<< 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",
-=======
       "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==",
@@ -11010,20 +10986,13 @@
           "dev": true,
           "optional": true,
           "requires": {
->>>>>>> origin
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-<<<<<<< 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
           "dev": true,
           "optional": true,
           "requires": {
@@ -11055,14 +11024,6 @@
           "dev": true,
           "optional": true
         },
-<<<<<<< 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
-=======
         "loader-utils": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
@@ -11074,7 +11035,6 @@
             "emojis-list": "^3.0.0",
             "json5": "^2.1.2"
           }
->>>>>>> origin
         },
         "supports-color": {
           "version": "7.2.0",

src/components/Cart.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="my-5">
+        <div class="container d-flex flex-wrap justify-content-between">
+            <div class="cont-resum-shop py-2 mb-4">
+                <h2 class="ml-3">Carrito</h2>
+                <hr>
+                
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[0].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[0].descripcion}}<br><span class="price-style"><b>${{productInfo[0].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[0].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[0].cantidad * productInfo[0].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="d-flex justify-content-between mx-4 my-4">
+                        <div class="d-flex">
+                            <!-- v-bind:src="'/media/avatars/' + joke.avatar" -->
+                            <img v-bind:src="infoResume[1].img" alt="Logo" style="height: 150px">
+                            <p class="mx-4">
+                                {{productInfo[1].descripcion}}<br><span class="price-style"><b>${{productInfo[1].precio}}</b></span>
+                            </p>
+                        </div>
+                        <div class="d-flex flex-wrap flex-column align-items-center">
+                            <div>
+                                <input type="number" class="inp-number p-1 d-inline-block" name="" id="" v-bind:value="infoResume[1].cantidad">
+                            </div>
+                            <span class="my-4"><b>${{infoResume[1].cantidad * productInfo[1].precio}}</b></span>
+                            <div>
+                                <a href="#" class="text-dark">
+                                    <font-awesome-icon icon="trash" class=""/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+
+            </div>
+            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">{{infoResume[0].cantidad}} Artículos<br>Envío</p>
+                    <p>${{infoResume[0].cantidad * productInfo[0].precio}}<br>{{infoResume[0].envioStatus}}</p>
+                </div>
+                <hr style="width:100%">
+                <div class="d-flex justify-content-between">
+                    <p class="mr-5">Total(IVA incluido)<br>${{infoResume[0].cantidad * productInfo[0].precio}}</p>
+                </div>
+                <hr style="width:100%">
+                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
+            </div>
+        </div>
+        <div class="container mt-3">
+            <div class="d-inline-block">
+                <a href="#">
+                    <p>
+                        Continuar la compra
+                    </p>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            productInfo: [
+                {
+                    id: 1,
+                    descripcion: 'Invitacion al psicoanálisis y lazos con la política, Lorem ipsum',
+                    precio: 10
+                },
+                 {
+                    id: 2,
+                    descripcion: 'Invitacion al derrocamiento de la burguesía, camarada.',
+                    precio: 2
+                }
+            ],
+            infoResume:[
+                    {
+                        cantidad: 4,
+                        envioStatus: 'pendiente',
+                        img: 'https://images.cdn3.buscalibre.com/fit-in/360x360/7d/92/7d92cb1e49ff2d7756f192114e5c8901.jpg',
+                    },
+                    {
+                        cantidad: 17,
+                        envioStatus: 'pendiente',
+                        img: 'https://images-na.ssl-images-amazon.com/images/I/51vHCno0a4L._SY291_BO1,204,203,200_QL40_ML2_.jpg',
+                    }
+                ],
+        }
+    }
+}
+</script>
+
+<style>
+.cont-resum-shop {
+    /* background-color: skyblue; */
+    -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);
+    /* border-radius: 5px; */
+    /* font-size: 15px; */
+}
+.inp-number {
+    width: 55px;
+    border-radius: 5px;
+    border: 0.3px solid lightgray;
+}
+.price-style {
+    color: #6C59FE;
+}
+.g-sec {
+    -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);
+}
+</style>

src/components/Header.vue

@@ -25,36 +25,23 @@
                 </div>
             
             </div>
-            
+            <MainMenu></MainMenu>
+
+
         </header>
-        <div class="header-f" >
-            <div class="container d-flex py-2 align-items-center justify-content-between">
-                <div>
-                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
-                </div>
-                <div>
-                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
-                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
-                    </a>
-                </div>
-            </div>
-        </div>
+
     </div>
 </template>
 
 <script>
+import MainMenu from './MainMenu'
 
 export default {
-    data() {
-        return {
-            
-        }
-    },
-    methods: {
-       
+components: {
+        MainMenu,
+
     }
 }
-
 </script>
 <style scoped>
 
@@ -63,9 +50,6 @@ export default {
     background: #1b3d70;
 }
 
-.header-f {
-    background-color: #bb8800;
-}
 .cart-icon-custom-properties {
     font-size: 20px;
 }

src/components/MainMenu.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <div class="header-f" >
+            <div class="container d-flex py-2 align-items-center justify-content-between">
+                <div class="d-flex">
+                    <div>
+                        <b-button v-b-toggle.sidebar-backdrop class="mr-3 menu-toggle-sty"><font-awesome-icon icon="bars"/></b-button>
+
+                        <b-sidebar
+                        id="sidebar-backdrop"
+                        title="Menú"
+                        :backdrop-variant="variant"
+                        backdrop
+                        shadow
+                        bg-variant="white" text-variant="primary"
+                        >
+                            <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">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 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>
+                                </li>
+                            </ul>
+                        </b-sidebar>
+                    </div>
+                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
+                </div>
+                <div>
+                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
+                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            items: [
+                { mensaje: 'Investigación Aplicada y Multidisciplinaria' },
+                { mensaje: 'Ciencias Socioeconómicas' }
+            ],
+            configuracion: [
+                { mensaje: 'Mi cuenta' },
+                { mensaje: 'Ayuda' },
+                { mensaje: 'Salir' },
+            ]
+        }
+    },
+    methods: {
+       
+    }
+}
+
+</script>
+<style scoped>
+
+.header-f {
+    background-color: #bb8800;
+}
+.cart-icon-custom-properties {
+    font-size: 20px;
+}
+.menu-toggle-sty {
+    background-color: transparent!important;
+    border: 1px solid white!important;
+    color: white!important;
+}
+.menu-toggle-sty:hover {
+    border: 1px solid rgba(255, 255, 255, 0.7)!important;
+    color: rgba(255, 255, 255, 0.7)!important;
+}
+.profi-main-text-sty, .profi-main-text-sty a {
+    color: #212529!important;
+}
+.profi-main-text-sty a:hover{
+    color:gray!important;
+    transition: 0.2s;
+}
+.b-sidebar-header-custom {
+    
+}
+ul li {
+    list-style: none;
+    margin: 10px auto;
+}
+ul li a {
+    text-decoration: none;
+    color: #212529!important;
+}
+ul li a:hover {
+    color: rgba(0, 0, 0, 0.6)!important;
+    transition: 0.2s;
+}
+</style>

src/icons.js

@@ -11,7 +11,8 @@ import {
     faShoppingCart,
     faTrash,
     faMapMarkerAlt,
-    faPhoneAlt
+    faPhoneAlt,
+    faBars
 } from '@fortawesome/free-solid-svg-icons'
 
 
@@ -27,4 +28,5 @@ library.add(faShoppingCart)
 library.add(faTrash)
 library.add(faMapMarkerAlt)
 library.add(faPhoneAlt)
+library.add(faBars)
 

src/routes.js

@@ -2,11 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
-<<<<<<< HEAD
 import PersonalData from './view/PersonalData.vue'
-=======
-import Cart from './view/Cart.vue'
->>>>>>> origin
 
 const routes = [
     {
@@ -20,15 +16,9 @@ const routes = [
         name: 'home'
     },
     {
-<<<<<<< HEAD
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
-=======
-        path: '/cart',
-        component: Cart,
-        name: 'cart'
->>>>>>> origin
     }
 ]
 

src/view/Cart.vue

@@ -1,99 +0,0 @@
-<template>
-    <div class="my-5">
-        <div class="container d-flex flex-wrap justify-content-between">
-            <div class="cont-resum-shop py-2 mb-4">
-                <h2 class="ml-3">Carrito</h2>
-                <hr>
-                <div class="d-flex justify-content-between mx-4 my-4">
-                    <div class="d-flex">
-                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
-                        <p class="mx-4">
-        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
-                        </p>
-                    </div>
-                    <div class="d-flex flex-wrap flex-column align-items-center">
-                        <div>
-                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
-                        </div>
-                        <span class="my-4"><b>$180</b></span>
-                        <div>
-                            <a href="#" class="text-dark">
-                                <font-awesome-icon icon="trash" class=""/>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="d-flex justify-content-between mx-4 my-4">
-                    <div class="d-flex">
-                        <img src="../img/bookOne.jpg" alt="Logo" style="height: 150px">
-                        <p class="mx-4">
-        Invitación al psicoanálisis y lazos con la política, Lorem ipsum<br><span class="price-style"><b>$180</b></span>
-                        </p>
-                    </div>
-                    <div class="d-flex flex-wrap flex-column align-items-center">
-                        <div>
-                            <input type="number" class="inp-number p-1 d-inline-block" name="" id="">
-                        </div>
-                        <span class="my-4"><b>$180</b></span>
-                        <div>
-                            <a href="#" class="text-dark">
-                                <font-awesome-icon icon="trash" class=""/>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="g-sec bg-light py-4 px-4 d-flex flex-column align-self-start align-items-center" style="">
-                <div class="d-flex justify-content-between">
-                    <p class="mr-5">2 Artículos<br>Envío</p>
-                    <p>$980<br>Pendiente</p>
-                </div>
-                <hr style="width:100%">
-                <div class="d-flex justify-content-between">
-                    <p class="mr-5">Total(IVA incluido)<br>$980</p>
-                </div>
-                <hr style="width:100%">
-                <button class="btn btn-primary mx-auto"><b>IR A LA CAJA</b></button>
-            </div>
-        </div>
-        <div class="container mt-3">
-            <div class="d-inline-block">
-                <a href="#">
-                    <p>
-                        Continuar la compra
-                    </p>
-                </a>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-.cont-resum-shop {
-    /* background-color: skyblue; */
-    -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);
-    /* border-radius: 5px; */
-    /* font-size: 15px; */
-}
-.inp-number {
-    width: 55px;
-    border-radius: 5px;
-    border: 0.3px solid lightgray;
-}
-.price-style {
-    color: #6C59FE;
-}
-.g-sec {
-    -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);
-}
-</style>

src/view/Home.vue

@@ -9,14 +9,15 @@
 </template>
 
 <script>
+
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-
-
+        
 export default {
 components: {
         Header,
-        Footer
+        Footer,
+
     }
 }
 </script>