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-main>
        <v-container fluid v-if="!loading">
          <nuxt />
        </v-container>
      </v-main>
    </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 { computed, ref } from '@vue/composition-api'
import { useRouter, useState } from '@u3u/vue-hooks'
import dayjs from 'dayjs'
import sv from 'dayjs/locale/sv'
import { setDarkMode } from '../utils/localStorage'
import Themed from './components/themed'
import { useAuth } from '../plugins/auth'

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: newLocale => {
        if (newLocale === 'en') {
          dayjs.locale(newLocale)
        } else if (newLocale === 'sv') {
          dayjs.locale(sv)
        }

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

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

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