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 v-if='!user' link @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><span v-text='user.name' /></v-list-item-title>
            </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 v-if='isAuthenticated' link to='/origins/'>
            <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 v-if='isAuthenticated' link to='/filters/'>
            <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 v-if='isAuthenticated' link>
            <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 @click='nav = !nav' />
        <v-toolbar-title><span v-text='title' /></v-toolbar-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><span v-text='user.name' /></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-toolbar-items>
      </v-app-bar>
      <v-main>
        <v-container v-if='!loading' fluid>
          <nuxt />
        </v-container>
      </v-main>
    </themed>
  </v-app>
</template>

<script>

import { computed, getCurrentInstance, provide, ref } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import Themed from './components/themed'
import { useAuth } from '~/plugins/auth'
import { useState } from '~/store'

export default {
  name: 'DefaultLayout',
  components: {
    Themed
  },
  setup() {
    const instance = getCurrentInstance()
    if (instance) {
      provide(DefaultApolloClient, instance.proxy.$apollo)
    }
    const state = useState()
    const router = useRouter()
    const onRedirectCallback = (appState) => {
      router.push(
        appState && appState.targetUrl
          ? appState.targetUrl
          : window.location.pathname
      )
    }
    const { loading, isAuthenticated, user, loginWithRedirect, logout } =
      useAuth(onRedirectCallback)
    const doLogin = () => {
      loginWithRedirect()
    }
    const doLogout = () => {
      logout({
        logoutParams: {
          returnTo: window.location.origin
        }
      })
    }
    const darkMode = computed({
      get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
      set: (val) => {
        if (instance) {
          instance.proxy.$vuetify.theme.dark = val
          state.setDarkMode(instance.proxy.$vuetify.theme.dark)
        }
      }
    })
    const locale = computed({
      get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
      set: (newLocale) => {
        if (instance) {
          instance.proxy.$i18n.setLocaleCookie(newLocale)
          instance.proxy.$vuetify.lang.current = newLocale
          instance.proxy.$i18n.locale = newLocale
        }
        state.setLocale(newLocale)
      }
    })

    const nav = ref(false)
    locale.value = instance.proxy.$i18n.locale

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