83 lines
3.1 KiB
Vue
83 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<b-nav vertical class="mt-3">
|
|
<b-nav-item class="m-2">
|
|
<div class="accordion" role="tablist">
|
|
<b-card no-body >
|
|
<b-card-header header-tag="header" role="tab">
|
|
<b-button block squared v-b-toggle.user class="p-1 azulUnam">
|
|
<b-icon icon="person-fill" style="margin-bottom: 4px;"></b-icon>
|
|
{{user}}
|
|
</b-button>
|
|
</b-card-header>
|
|
<b-collapse id="user" accordion="my-accordion" role="tabpanel">
|
|
<b-card-body>
|
|
<b-button block variant="light" class="p-1 m-0 rojo" @click="cerrarSesion()">Cerrar sesión</b-button>
|
|
</b-card-body>
|
|
</b-collapse>
|
|
</b-card>
|
|
</div>
|
|
|
|
</b-nav-item>
|
|
<b-nav-item class="m-2">
|
|
<div class="accordion" role="tablist">
|
|
<b-card no-body >
|
|
<b-card-header header-tag="header" role="tab">
|
|
<b-button block squared v-b-toggle.banner @click="$store.commit('cambiarNav','EditarBanner')" class="p-1 azulUnam">Banner principal</b-button>
|
|
</b-card-header>
|
|
<b-collapse id="banner" accordion="my-accordion" role="tabpanel">
|
|
<b-card-body>
|
|
</b-card-body>
|
|
</b-collapse>
|
|
</b-card>
|
|
</div>
|
|
</b-nav-item>
|
|
<b-nav-item class="m-2">
|
|
<div class="accordion" role="tablist">
|
|
<b-card no-body >
|
|
<b-card-header header-tag="header" role="tab">
|
|
<b-button block squared v-b-toggle.libros class="p-1 azulUnam">Libros</b-button>
|
|
</b-card-header>
|
|
<b-collapse id="libros" accordion="my-accordion" role="tabpanel">
|
|
<b-card-body>
|
|
<b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','EditarLibro')">Editar</b-button>
|
|
<b-button block variant="light" class="p-1 m-0" @click="$store.commit('cambiarNav','AgregarLibro')">Agregar</b-button>
|
|
</b-card-body>
|
|
</b-collapse>
|
|
</b-card>
|
|
</div>
|
|
</b-nav-item>
|
|
</b-nav>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props:{
|
|
user: String
|
|
},
|
|
methods:{
|
|
cerrarSesion(){
|
|
localStorage.clear();
|
|
this.$router.replace('/login')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.azulUnam {
|
|
background-color: #1e3c70;
|
|
}
|
|
.rojo:hover{
|
|
background-color: #CA230C;
|
|
color: white;
|
|
}
|
|
|
|
</style>
|