dancefinder-app/layouts/default.vue

<template>
  <v-app :key="$i18n.locale + isAuthenticated">
    <v-navigation-drawer v-model="nav" temporary app>
      <v-list dense>
        <v-list-item v-if="!user" link :title="$t('app.login')" @click="doLogin" />
        <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>
        <v-list-item title="In English" :to="switchLocalePath('en')">
          <template #prepend>
            <div class="d-flex d-inline-flex text-h5 me-8">
              🇬🇧
            </div>
          </template>
        </v-list-item>
        <v-list-item title="På Svenska" :to="switchLocalePath('sv')">
          <template #prepend>
            <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="isAuthenticated" link :title="$t('app.logout')" prepend-icon="mdi-exit-to-app" @click="doLogout" />
      </v-list>
    </v-navigation-drawer>
    <v-app-bar app scroll-off-screen>
      <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 { computed, onMounted, ref } from 'vue'
import { useTheme } from 'vuetify'
import { useAuth0 } from '@auth0/auth0-vue'
import { useSwitchLocalePath } from '#i18n'
import { useState } from '~/store'

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)
</script>