dancefinder-app/app/layouts/default.vue

<template>
  <v-app :key='locale + isAuthenticated'>
    <v-navigation-drawer v-model='nav' temporary>
      <v-list density="compact">
        <v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
        <v-list-item>
          <v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
        </v-list-item>
        <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
        <v-list-item title='In English' :to="switchLocalePath('en')">
          <template #prepend>
            <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
            <div class='d-flex d-inline-flex text-h5 me-8'>
              🇬🇧
            </div>
          </template>
        </v-list-item>
        <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
        <v-list-item title='På Svenska' :to="switchLocalePath('sv')">
          <template #prepend>
            <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
            <div class='d-flex d-inline-flex text-h5 me-8'>
              🇸🇪
            </div>
          </template>
        </v-list-item>
        <v-list-item to='/' :title="t('app.links.events')" prepend-icon='mdi-calendar-outline' />
        <v-list-item v-if='isAuthenticated' to='/origins/' :title="t('app.links.origins')" prepend-icon='mdi-home' />
        <v-list-item
v-if='isAuthenticated' to='/filters/' :title="t('app.links.filters')"
                     prepend-icon='mdi-magnify' />
        <v-list-item v-if='!user' link :title="t('app.login')" prepend-icon='mdi-login' @click='doLogin' />
        <v-list-item
v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
                     @click='doLogout' />
      </v-list>
    </v-navigation-drawer>
    <v-app-bar scroll-behavior="hide">
      <v-app-bar-nav-icon @click='nav = !nav' />
      <v-toolbar-title :title='title' />
      <v-spacer />
      <v-toolbar-items>
        <v-list-item v-if='isAuthenticated && user' :prepend-avatar='user.picture' :title='user.name' />
      </v-toolbar-items>
    </v-app-bar>
    <v-main>
      <v-container v-if='!isLoading' fluid>
        <slot />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang='ts'>
import { useAuth0 } from '@auth0/auth0-vue'
import { computed, onMounted, ref } from 'vue'
import { useTheme } from 'vuetify'

import { useSwitchLocalePath } from '#i18n'
import { useState } from '~/store'

const { t, locale } = useI18n()
const { $faro } = useNuxtApp()
const switchLocalePath = useSwitchLocalePath()
const state = useState()
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } =
  useAuth0()
const doLogin = () => {
  loginWithRedirect({
    appState: { targetUrl: window.location.pathname },
  })
}
const doLogout = () => {
  logout({
    logoutParams: {
      returnTo: window.location.origin,
    },
  })
}
const theme = useTheme()
onMounted(() => {
  if (state.darkMode) {
    theme.global.name.value = 'dark'
  } else {
    theme.global.name.value = 'light'
  }
})
const darkMode = computed<boolean>({
  get: () => theme.global.current.value.dark,
  set: (value: boolean) => {
    state.setDarkMode(value)
    if (value) {
      theme.global.name.value = 'dark'
    } else {
      theme.global.name.value = 'light'
    }
  },
})

const nav = ref(false)
const title = computed(() => state.title)
watchEffect(() => {
  if ($faro && !isLoading.value && user.value) {
    $faro.api.setUser({
      id: user.value.sub,
      email: user.value.email,
      username: user.value.preferred_username,
    })
  }
})
</script>