You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from "vue"
|
|
import { useData } from "vitepress"
|
|
import type { DefaultTheme } from 'vitepress'
|
|
|
|
import VPNavBarMenuLink from "vitepress/dist/client/theme-default/components/VPNavBarMenuLink.vue"
|
|
import VPNavBarMenuGroup from "vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue"
|
|
|
|
import { data as release } from "../data/release.data"
|
|
|
|
const { theme } = useData<DefaultTheme.Config>()
|
|
|
|
// Used to avoid hydration issues.
|
|
const replace = ref(false)
|
|
|
|
onMounted(() => {
|
|
replace.value = true
|
|
})
|
|
|
|
/**
|
|
* Workaround to use the release data directly while the sidebar
|
|
* and navbar doesn't support using the VitePress data loading.
|
|
*/
|
|
const nav = computed(() => {
|
|
if (!replace.value) {
|
|
return theme.value.nav
|
|
}
|
|
|
|
return theme.value.nav?.map((item) => {
|
|
if (!item.text.includes("{app_version}")) {
|
|
return item
|
|
}
|
|
|
|
const appVersion = release.stable.tag_name.substring(1)
|
|
|
|
return {
|
|
...item,
|
|
text: item.text.replace("{app_version}", appVersion),
|
|
} satisfies DefaultTheme.NavItem
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
|
|
<span id="main-nav-aria-label" class="visually-hidden">Main navigation</span>
|
|
<template v-for="item in nav" :key="item.text">
|
|
<VPNavBarMenuLink v-if="'link' in item" :item="item" />
|
|
<VPNavBarMenuGroup v-else :item="item" />
|
|
</template>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.VPNavBarMenu {
|
|
display: none
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.VPNavBarMenu {
|
|
display: flex
|
|
}
|
|
}
|
|
</style> |