92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
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>
|