57 lines
1.9 KiB
Vue
57 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
const session = useSessionStore();
|
|
const { locale, locales, setLocale } = useI18n();
|
|
const { currency } = usePrefs();
|
|
const { $api } = useNuxtApp();
|
|
|
|
onMounted(() => session.hydrate());
|
|
|
|
const currencies = ref<string[]>(["USD"]);
|
|
onMounted(async () => {
|
|
try {
|
|
const list = await $api.listCurrencies();
|
|
if (list.length > 0) currencies.value = list.map((c) => c.code);
|
|
} catch {
|
|
/* API may be down during SSR-less dev */
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="topnav">
|
|
<div class="container topnav-inner">
|
|
<NuxtLink to="/" class="brand">{{ $t("common.appName") }}</NuxtLink>
|
|
<nav>
|
|
<NuxtLink to="/">{{ $t("nav.home") }}</NuxtLink>
|
|
<NuxtLink to="/cart">{{ $t("nav.cart") }}</NuxtLink>
|
|
<NuxtLink to="/orders">{{ $t("nav.orders") }}</NuxtLink>
|
|
<NuxtLink to="/invoices">{{ $t("nav.invoices") }}</NuxtLink>
|
|
</nav>
|
|
<select
|
|
:value="currency"
|
|
:aria-label="$t('common.currency')"
|
|
@change="currency = ($event.target as HTMLSelectElement).value"
|
|
>
|
|
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
|
|
</select>
|
|
<select
|
|
:value="locale"
|
|
:aria-label="$t('common.language')"
|
|
@change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')"
|
|
>
|
|
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
|
|
</select>
|
|
<template v-if="session.isLoggedIn">
|
|
<span class="muted">{{ session.user?.display_name }}</span>
|
|
<button class="btn sm" @click="session.logout()">{{ $t("common.logout") }}</button>
|
|
</template>
|
|
<NuxtLink v-else to="/login" class="btn sm primary">{{ $t("common.login") }}</NuxtLink>
|
|
</div>
|
|
</header>
|
|
<main class="container page">
|
|
<NuxtPage />
|
|
</main>
|
|
</div>
|
|
</template>
|