43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<div class="top-bar relative z-10 flex justify-between bg-marine h-16">
|
|
<router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
|
|
<Avatar :avatar="authUser.data.attributes.thumbnail_cover_image.data.attributes.path" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
|
|
<span class="ml-2 text-gray-100 hover:text-white">{{ authUser.data.attributes.name }}</span>
|
|
</router-link>
|
|
<form v-if="authUser && search" class="m-2">
|
|
<input type="search" name="search" placeholder="Search">
|
|
<button type="submit" value="S">
|
|
<svg-vue icon="search" />
|
|
</button>
|
|
</form>
|
|
<router-link to="/dashboard" v-if="authUser" class="text-gray-100 hover:text-white">
|
|
<svg-vue icon="params" class="w-10 m-3 fill-current" />
|
|
</router-link>
|
|
<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
|
|
},
|
|
data: function () {
|
|
return {
|
|
search: false,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
authUser: 'authUser',
|
|
})
|
|
}
|
|
}
|
|
</script>
|