diff --git a/components/Nav/Navbar.vue b/components/Nav/Navbar.vue index b623a21c1c38f219658244956e1f5f6024269b55..9b0dc3f11cf760c82baea2fb60421ed043a935bb 100644 --- a/components/Nav/Navbar.vue +++ b/components/Nav/Navbar.vue @@ -1,55 +1,19 @@ -<template> - <v-app-bar :elevation="0" border density="prominent" scroll-behavior="hide"> - <template #prepend> - <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> - <!-- <Logo height="45px" /> --> - </template> - <v-app-bar-title> - <span class="d-flex align-center"> - Knowledge database of all known anti-phage systems by - </span> - </v-app-bar-title> - <template #append v-if="!mobile"> - <v-btn v-for="section in sections" :key="section.id" color="primary" :href="section.href"> - {{ section.label }} - </v-btn> - <v-btn @click="toggleTheme" color="primary" :icon="theme.global.current.value.dark ? 'md:light_mode' : 'md:dark_mode' - "></v-btn> - </template> - </v-app-bar> - <v-navigation-drawer v-model="drawer" :border="1"> - <v-list nav density="compact" :lines="false"> - <NavNavigation :navigation="computedNavigation" /> - </v-list> - </v-navigation-drawer> -</template> <script setup lang="ts"> // import { useCustomTheme } from '~/composables/useCustomTheme' import { useDisplay, useTheme } from "vuetify"; -import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"; const runtimeConfig = useRuntimeConfig(); + const { navigation } = useContent(); const { mobile } = useDisplay(); const theme = useTheme(); + function toggleTheme() { theme.global.name.value = theme.global.current.value.dark ? "light" : "dark"; } -const refSeqPath = ref("/refseq"); -const refinedRefSeqPath = computed(() => { - if (refSeqPath.value?.startsWith("/") && !refSeqPath.value.startsWith("//")) { - const _base = withLeadingSlash( - withTrailingSlash(useRuntimeConfig().app.baseURL) - ); - if (_base !== "/" && !refSeqPath.value.startsWith(_base)) { - return joinURL(_base, refSeqPath.value); - } - } - return refSeqPath; -}); const sections = ref([ { @@ -57,9 +21,28 @@ const sections = ref([ label: "webservice", href: runtimeConfig.public.defenseFinderWebservice, }, - { id: "refseq", label: "REFSEQ", href: refinedRefSeqPath.value }, - { id: "help", label: "Help", href: "/help" }, + { id: "wiki", label: "Wiki", to: '/', }, + { id: "refseq", label: "REFSEQ", to: '/refseq' }, + { id: "help", label: "Help", to: '/help' }, ]); + + +const computedSections = computed(() => { + return sections.value.map(section => { + + if (section?.to) { + const { refinedUrl } = useRefinedUrl(section.to) + return { ...section, to: refinedUrl.value } + } + else { + return section + } + + + }) +}) + + const drawer = ref(true); const computedNavigation = computed(() => { @@ -81,3 +64,29 @@ const computedNavigation = computed(() => { }); }); </script> +<template> + <v-app-bar :elevation="0" border density="prominent" scroll-behavior="hide"> + <template #prepend> + <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> + <!-- <Logo height="45px" /> --> + </template> + <v-app-bar-title> + <span class="d-flex align-center"> + Knowledge database of all known anti-phage systems by + </span> + </v-app-bar-title> + <template #append v-if="!mobile"> + <v-btn v-for="section in computedSections" :key="section.id" color="primary" :to="section?.to ?? null" + :href="section?.href ?? null" exact> + {{ section.label }} + </v-btn> + <v-btn @click="toggleTheme" color="primary" :icon="theme.global.current.value.dark ? 'md:light_mode' : 'md:dark_mode' + "></v-btn> + </template> + </v-app-bar> + <v-navigation-drawer v-model="drawer" :border="1"> + <v-list nav density="compact" :lines="false"> + <NavNavigation :navigation="computedNavigation" /> + </v-list> + </v-navigation-drawer> +</template> \ No newline at end of file diff --git a/composables/useRefinedUrl.ts b/composables/useRefinedUrl.ts new file mode 100644 index 0000000000000000000000000000000000000000..bd6793341ee4ac036cb886ea98984ae1bf0c945e --- /dev/null +++ b/composables/useRefinedUrl.ts @@ -0,0 +1,18 @@ +import { withTrailingSlash, withLeadingSlash, joinURL } from "ufo"; + + +export function useRefinedUrl(url: string | Ref<string>) { + const refinedUrl = computed(() => { + const sanitzedUrl = toValue(url) + if (sanitzedUrl.startsWith("/") && !sanitzedUrl.startsWith("//")) { + const _base = withLeadingSlash( + withTrailingSlash(useRuntimeConfig().app.baseURL) + ); + if (_base !== "/" && !sanitzedUrl.startsWith(_base)) { + return joinURL(_base, sanitzedUrl); + } + } + return toValue(url); + }); + return { refinedUrl } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 775e9bbb39c9486ecc8468e8c65ed1abcb805be7..f7de6814f9d83fe50a39096c6178bbe1ab4357e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "app", + "name": "wiki", "lockfileVersion": 3, "requires": true, "packages": {