dancefinder-app/layouts/default.vue

<template>
  <v-app :key="$i18n.locale + isAuthenticated">
    <themed>
      <v-navigation-drawer
        v-model="nav"
        temporary
        app
      >
        <v-list dense>
          <v-list-item>
            <v-list-item-action>
              <v-switch v-model="darkMode"/>
            </v-list-item-action>
            <v-list-item-title>{{ $t('app.darkMode') }}</v-list-item-title>
          </v-list-item>
          <v-list-item @click="locale = 'en'">
            <v-list-item-title>In English 🇬🇧</v-list-item-title>
          </v-list-item>
          <v-list-item @click="locale = 'sv'">
            <v-list-item-title>På Svenska 🇸🇪</v-list-item-title>
          </v-list-item>
          <v-list-item link v-if="!user" @click="doLogin">
            <v-list-item-title>{{ $t('app.login') }}</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="isAuthenticated && user">
            <v-list-item-avatar>
              <v-img :src="user.picture" :alt="user.name"/>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title v-html="user.name"/>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/">
            <v-list-item-action>
              <v-icon>mdi-calendar-outline</v-icon>
            </v-list-item-action>
            <v-list-item-title>{{ $t('app.links.events') }}</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/origins/" v-if="isAuthenticated">
            <v-list-item-action>
              <v-icon>mdi-home</v-icon>
            </v-list-item-action>
            <v-list-item-title>{{ $t('app.links.origins') }}</v-list-item-title>
          </v-list-item>
          <v-list-item link to="/filters/" v-if="isAuthenticated">
            <v-list-item-action>
              <v-icon>mdi-magnify</v-icon>
            </v-list-item-action>
            <v-list-item-title>{{ $t('app.links.filters') }}</v-list-item-title>
          </v-list-item>
          <v-list-item link v-if="isAuthenticated">
            <v-list-item-action>
              <v-icon>exit_to_app</v-icon>
            </v-list-item-action>
            <v-list-item-content @click="doLogout">
              <v-list-item-title>{{ $t('app.logout') }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-app-bar app scroll-off-screen>
        <v-app-bar-nav-icon v-on:click="nav = !nav"/>
        <v-toolbar-title v-html="title"/>
        <v-spacer/>
        <v-toolbar-items>
          <v-list-item v-if="isAuthenticated && user">
            <v-list-item-avatar>
              <v-img :src="user.picture" :alt="user.name"/>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title v-html="user.name"/>
            </v-list-item-content>
          </v-list-item>
        </v-toolbar-items>
      </v-app-bar>
      <v-content>
        <v-container fluid v-if="!loading">
          <nuxt/>
        </v-container>
      </v-content>
    </themed>
  </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 { useAuth } from '../plugins/auth'
import { computed, ref } from '@vue/composition-api'
import Themed from './components/themed'
import { setDarkMode } from '../utils/localStorage'
import { useRouter, useState } from '@u3u/vue-hooks'
import dayjs from 'dayjs'
import sv from 'dayjs/locale/sv'

export default {
  components: {
    Themed,
  },
  setup(props, context) {
    const { router } = useRouter()
    const { title } = useState(['title'])
    const onRedirectCallback = appState => {
      router.push(
        appState && appState.targetUrl
          ? appState.targetUrl
          : window.location.pathname
      );
    }
    const { loading, isAuthenticated, user, loginWithRedirect, logout } = useAuth(onRedirectCallback)
    const doLogin = () => {
      loginWithRedirect.value();
    }
    const doLogout = () => {
      logout.value({
        returnTo: window.location.origin
      });
    }
    const darkMode = computed({
      get: () => context.root.$vuetify.theme.dark,
      set: val => {
        context.root.$vuetify.theme.dark = val
        setDarkMode(context.root.$vuetify.theme.dark)
      }
    })
    const locale = computed({
      get: () => context.root.$i18n.locale,
      set: locale => {
        if (locale === 'en') {
          dayjs.locale(locale)
        } else if (locale === 'sv') {
          dayjs.locale(sv)
        }

        context.root.$i18n.setLocaleCookie(locale)
        context.root.$vuetify.lang.current = locale
        context.root.$i18n.locale = locale
      }
    })

    const nav = ref(false)
    locale.value = context.root.$i18n.locale

    return {
      title,
      loading,
      isAuthenticated,
      user,
      doLogin,
      doLogout,
      darkMode,
      locale,
      nav
    }
  },
};
</script>