111 lines
3.4 KiB
Vue
111 lines
3.4 KiB
Vue
<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>
|