55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex-between flex-center py-1 px-2 topbar">
|
|
<router-link v-if="authUser" :to="'/profil'" class="flex-middle avatar-box">
|
|
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
|
|
{{ authUser.data.attributes.name }}
|
|
</router-link>
|
|
<form v-if="authUser" class="search-box">
|
|
<input type="search" name="search" placeholder="Search">
|
|
<button type="submit" value="S">
|
|
<svg-vue icon="search" />
|
|
</button>
|
|
</form>
|
|
<div v-if="authUser">
|
|
<router-link to="/dashboard" class="mr-1">
|
|
<svg-vue icon="params" />
|
|
</router-link>
|
|
<a href="#" @click.prevent="logout" class="nav-link">
|
|
<svg-vue icon="logout" />
|
|
</a>
|
|
</div>
|
|
<router-link v-else to="/login">
|
|
Se connecter
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import Avatar from "./Avatar";
|
|
|
|
export default {
|
|
name: "TopBar",
|
|
components: {
|
|
Avatar
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
authUser: 'authUser',
|
|
})
|
|
},
|
|
methods: {
|
|
logout: function () {
|
|
axios.post('logout')
|
|
.then(res => {
|
|
if(res.status ===302 || 401) {
|
|
window.location.href = '/login'
|
|
}
|
|
}).catch(error => {
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|