111 lines
2.6 KiB
Vue
111 lines
2.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<template v-if="user.authenticated">
|
|
<div class="ui secondary menu">
|
|
<router-link to="/" class="item" v-lang.nav.home></router-link>
|
|
<router-link to="/books" class="item" v-lang.nav.books></router-link>
|
|
<router-link to="/authors" class="item" v-lang.nav.authors></router-link>
|
|
<router-link to="/publishers" class="item" v-lang.nav.publishers></router-link>
|
|
<router-link to="/items" class="item" v-lang.nav.items></router-link>
|
|
<div class="right menu">
|
|
<img v-bind:src="gravatar" class="menu-avatar"/>
|
|
<div class="ui item"> {{ user.infos.username }}</div>
|
|
<a class="ui item" @click="logout()">
|
|
<icon name="sign-out"></icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
</template>
|
|
<router-view/>
|
|
|
|
<div class="lang-switcher">
|
|
<a @click="language = 'en'"><i class="gb flag"></i></a>
|
|
<a @click="language = 'de'"><i class="de flag"></i></a>
|
|
<a @click="language = 'fr'"><i class="fr flag"></i></a>
|
|
</div>
|
|
<notifications position="bottom left" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import auth from './auth'
|
|
import router from './router'
|
|
|
|
export default {
|
|
name: 'app',
|
|
data () {
|
|
return {
|
|
user: auth.user,
|
|
gravatar: ''
|
|
}
|
|
},
|
|
created () {
|
|
// Redirect the user to the login page if he's not logged in
|
|
if (!this.user.authenticated) {
|
|
this.logout()
|
|
router.push({ name: 'login' })
|
|
}
|
|
|
|
// Set the users avatar
|
|
this.setAvatar()
|
|
},
|
|
watch: {
|
|
// call again the method if the route changes
|
|
'$route': 'setAvatar'
|
|
},
|
|
methods: {
|
|
logout () {
|
|
auth.logout()
|
|
},
|
|
setAvatar () {
|
|
auth.getUserInfos()
|
|
this.gravatar = 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=40&d=mm'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
*, *:hover, *:active, *:focus{
|
|
outline: none;
|
|
}
|
|
|
|
#app{
|
|
margin: 0 1em;
|
|
padding-top: 1.5em;
|
|
}
|
|
|
|
.menu-avatar{
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
a, a:hover, a:focus, a:active{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lang-switcher{
|
|
float: right;
|
|
}
|
|
|
|
.grey{
|
|
color: #ccc;
|
|
}
|
|
|
|
.ui.secondary.menu .router-link-exact-active{
|
|
box-shadow: none;
|
|
background: rgba(0,0,0,.05);
|
|
color: rgba(0,0,0,.95);
|
|
border-radius: .28571429rem;
|
|
align-self: center;
|
|
border: none;
|
|
padding: .78571429em .92857143em;
|
|
margin: 0 .35714286em;
|
|
-webkit-transition: color .1s ease;
|
|
transition: color .1s ease;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|