130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-navigation-drawer
|
|
v-model="left"
|
|
temporary
|
|
app
|
|
>
|
|
<v-list dense>
|
|
<v-list-tile v-if="!hasUser" @click="() => { doLogin(); }">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>Login</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile avatar v-if="hasUser">
|
|
<v-list-tile-avatar>
|
|
<v-img :src="user.picture" :alt="user.name"></v-img>
|
|
</v-list-tile-avatar>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-html="user.name"></v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile>
|
|
<v-list-tile-action>
|
|
<v-icon>mdi-calendar-outline</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<nuxt-link to="/"><v-list-tile-title>Evenemang</v-list-tile-title></nuxt-link>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile v-if="hasUser">
|
|
<v-list-tile-action>
|
|
<v-icon>mdi-home</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<nuxt-link to="/origins/"><v-list-tile-title>Hantera startpunkter</v-list-tile-title></nuxt-link>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile v-if="hasUser">
|
|
<v-list-tile-action>
|
|
<v-icon>mdi-magnify</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<nuxt-link to="/filters/"><v-list-tile-title>Hantera filter</v-list-tile-title></nuxt-link>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-list-tile v-if="hasUser">
|
|
<v-list-tile-action>
|
|
<v-icon>exit_to_app</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-content>
|
|
<nuxt-link to="/logout/"><v-list-tile-title>Logga ut</v-list-tile-title></nuxt-link>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-toolbar app scroll-off-screen>
|
|
<v-toolbar-side-icon v-on:click="left = !left"></v-toolbar-side-icon>
|
|
<v-toolbar-title v-html="title"></v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items>
|
|
<v-list-tile avatar v-if="hasUser">
|
|
<v-list-tile-avatar>
|
|
<v-img :src="user.picture" :alt="user.name"></v-img>
|
|
</v-list-tile-avatar>
|
|
<v-list-tile-content>
|
|
<v-list-tile-title v-html="user.name"></v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
<v-content>
|
|
<v-container fluid>
|
|
<nuxt />
|
|
</v-container>
|
|
</v-content>
|
|
</v-app>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// We need this line to import all global styling
|
|
@import "assets/scss/global.scss";
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.layout {
|
|
background-color: white;
|
|
|
|
.log-out {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import auth from "~/utils/auth";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: undefined,
|
|
left: false
|
|
};
|
|
},
|
|
computed: {
|
|
hasUser() {
|
|
return this.user;
|
|
},
|
|
title() {
|
|
return this.$store.state.title;
|
|
}
|
|
},
|
|
watch: {
|
|
"$route.path"() {
|
|
this.fetchUser();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchUser();
|
|
},
|
|
methods: {
|
|
fetchUser() {
|
|
this.user = auth.getUserInfo();
|
|
},
|
|
doLogin() {
|
|
auth.triggerLogin({ returnUrl: this.$route.fullPath });
|
|
}
|
|
}
|
|
};
|
|
</script>
|