<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>
