dancefinder-app/layouts/default.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>