43 lines
1.3 KiB
Vue
43 lines
1.3 KiB
Vue
<template>
|
|
<div class="top-bar flex justify-between bg-orange-300">
|
|
<router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
|
|
<Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
|
|
<span class="ml-2 hover:text-orange-900">{{ 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-orange-600 hover:text-orange-800">
|
|
<svg-vue icon="params" class="w-10 m-2 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>
|