-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Navigation.vue
94 lines (81 loc) · 2.07 KB
/
Navigation.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<script setup lang="ts">
/* eslint-disable @typescript-eslint/no-unused-vars */
import { computed } from 'vue'
import { useRouter, useData, withBase } from 'vitepress'
const LOCALE_INFO: Record<string, string> = {
en: 'English',
ja: '日本語'
}
const router = useRouter()
const { site, theme, page } = useData<{
logo: string
nav: { text: string; link: string }[]
}>()
const _locales = Object.keys(site.value.locales)
.map(k => site.value.locales[k].lang)
.filter(Boolean) as string[]
const locales = _locales.map(lang => ({
locale: lang,
display: LOCALE_INFO[lang]
}))
const siteLogo = computed(() => {
return site.value.themeConfig.logo
})
const siteNav = computed(() => {
return site.value.themeConfig.nav
})
// DISABLE: const onChange = (e: Event) => {
// DISABLE: const target = e.target as HTMLInputElement
// DISABLE: router.go(target.value === 'en' ? '/' : `/${target.value}/`)
// DISABLE: }
/* eslint-enable @typescript-eslint/no-unused-vars */
</script>
<template>
<nav class="navigation">
<div class="logo">
<a :aria-label="site.title" href="/">
<img :src="withBase(siteLogo)" :alt="site.title" />
</a>
</div>
<div class="menu">
<template v-for="{ text, link } in siteNav">
<a :href="link" :aria-label="text" target="_blank" rel="noopener">
{{ text }}
</a>
</template>
<!-- DISABLE:
<form class="locale">
<select @change="onChange">
<option
v-for="{ locale, display } in locales"
:selected="$i18n.locale === locale"
:value="locale"
>
{{ display }}
</option>
</select>
</form>
--></div>
</nav>
</template>
<style scoped>
.navigation {
@apply flex justify-between items-center py-2 font-bold;
}
.logo a {
@apply text-xl;
}
.logo img {
@apply h-10;
}
.menu {
@apply text-base text-gray-500 leading-5;
}
.menu a {
@apply hover:text-gray-700 mr-4;
}
.menu .locale {
@apply inline-block transition-colors duration-300
ease-linear text-gray-700 rounded-full;
}
</style>