Files
censo2020Front/src/components/Header.vue
T
2020-08-24 18:56:22 -05:00

118 lines
3.2 KiB
Vue

<template>
<header id="iniLetter">
<div class="container-fluid header-h">
<div class="col-4 offset-1 d-inline-flex p-0 align-items-center">
<a href="https://www.unam.mx/"
><img
src="../img/Logo-UNAM.png"
class="img-fluid"
alt="Logo UNAM"
/></a>
</div>
<div
class="col-4 offset-2 d-inline-flex justify-content-end p-0 align-items-center"
>
<a href="http://www.acatlan.unam.mx/">
<img
src="../img/logo_fesa.png"
class="img-fluid"
alt="Logo Fes Acatlán"
/>
</a>
</div>
</div>
<div
class="header-f"
v-if="!['login', 'start'].includes($route.name)"
>
<div class="container d-flex justify-content-between py-1">
<div class="d-flex">
<span class="text-white mr-3 my-auto mr-md-4" v-text="setCurrentUser()">
</span>
<div v-if="isAdmin()">
<!-- <router-link to="login" class="text-white align-middle">Añadir equipo</router-link> -->
<b-dropdown id="dropdown-left" text="Añadir " variant="info" class="m-2">
<b-dropdown-item> <router-link to="addEquip" class="text-decoration-none text-body"> Computadora </router-link></b-dropdown-item>
<b-dropdown-item> <router-link to="addPrinter" class="text-decoration-none text-body"> Impresora </router-link></b-dropdown-item>
</b-dropdown>
</div>
</div>
<div class="my-auto">
<span
class="badge badge-danger py-2 px-3" style="font-size:14px, font-family: Arial:none; cursor: pointer;"
v-on:click="logout()"
>
Cerrar sesión
</span>
</div>
</div>
</div>
</header>
</template>
<script>
export default {
data() {
return {
user: null
}
},
methods: {
setCurrentUser(){
return window.localStorage.user;
},
logout: function() {
localStorage.clear();
this.$router.replace('/login')
},
isAdmin: function() {
return JSON.parse(localStorage.getItem('isAdmin'));
}
}
}
</script>
<style scoped>
.header-h {
/* background: #1b3d70; */
background: #1b3d70;
padding: 1rem 0;
}
.contenedor-header {
padding: 1rem 0;
display: flex;
width: 100%;
justify-content: space-between;
}
.contenedor-img {
width: 40%;
display: flex;
align-items: center;
justify-content: center;
}
.contenedor-img img {
max-width: 100%;
}
.header-f {
padding: 0.1rem 0;
background-color: #bb8800;
}
#info {
color: white;
}
.sesion {
margin: 0.5rem;
line-height: 0.5rem !important;
}
</style>