danielGe/TiendaFront
2
0
Fork 0
Code Issues Pull Requests 3 Releases Wiki Activity

navbar component

Browse Source
This commit is contained in:
Enrique Maya García
2020-10-22 20:58:26 -05:00
parent 9f2f2ef7b0
commit 667d6e34a4
5 changed files with 118 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
-40
View File
@@ -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/Header.vue
+1 -15
View File
@@ -27,18 +27,7 @@
</div>
</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>
@@ -63,9 +52,6 @@ export default {
background: #1b3d70;
}
.header-f {
background-color: #bb8800;
}
.cart-icon-custom-properties {
font-size: 20px;
}
src/components/MainMenu.vue
+110
View File
@@ -0,0 +1,110 @@
<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
>
<div class="px-3 mt-3 py-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>
<h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>
<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>
<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: black!important;
}
.profi-main-text-sty a:hover{
color:gray!important;
transition: 0.2s;
}
ul li {
list-style: none;
margin: 10px auto;
}
ul li a {
text-decoration: none;
color: black!important;
}
ul li a:hover {
color: rgba(0, 0, 0, 0.6)!important;
transition: 0.2s;
}
</style>
src/icons.js
+3 -1
View File
@@ -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/view/Home.vue
+4 -1
View File
@@ -1,6 +1,7 @@
<template>
<div>
<Header></Header>
<MainMenu></MainMenu>
<div class="container my-5">
<h1 class="text-center">Home</h1>
</div>
@@ -10,13 +11,15 @@
<script>
import Header from '../components/Header'
import MainMenu from '../components/MainMenu'
import Footer from '../components/Footer'
export default {
components: {
Header,
Footer
Footer,
MainMenu
}
}
</script>