chore(deps): update dependency nuxt to v4

2025-07-16 16:05:26 +00:00
parent db5f9725d4
commit d8e438be10
22 changed files with 1264 additions and 573 deletions
@@ -0,0 +1,111 @@
+<template>
+  <v-app :key='locale + isAuthenticated'>
+    <v-navigation-drawer v-model='nav' temporary app>
+      <v-list dense>
+        <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 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 { 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>