How to make a dynamic nav menu?

[kwesterfeld2]

First, I just encountered vitepress after reading about it for a year, and ported a prototype vuepress site to it. Loving it very much! Now I'm trying to get my site finished with vitepress.

I have the requirement to show a "Versions" pulldown for my vitepress site, where each released version of our product would be available as a pulldown to navigate between at a high level. The idea I had was to add nav items programmatically based on retrieving a server resource to build the menu. I don't want to precompute this at build time, since I'd like to be able to navigate forward/backward through semver releases of our docsite. Example: I am viewing "latest", which might be 9.5, and then pick "8.2" from the menu, which would have been released months ago. This same menu would let me then re-pick 9.5 and releases between.

Some ideas I had:

• add a custom component to a known slot in the nav bar. This is all well and good, but the slots available don't collapse/show responsively. Effectively, I'd like to be able to add a menu dropdown that appears to be built with exact same behavior and appearance as a static menu.
• programmatically mutate the site data on load. I tried this, but vue throws up its hands and says "you can't modify...readonly"
• subclass and build the entire theme layout. This seems like a large undertaking but I'm willing/open to ideas on this.

Since I am striking out I'm asking the community for ideas on this.

[StreakingMan]

a simple workaround is rewrite VpNavBarMenu.vue:

// ./vitepress/config.js

export default defineConfig({
    vite: {
       resolve: {
                alias: [
                    {
                        find: /^.*\/VPNavBarMenu\.vue$/,
                        replacement: fileURLToPath(
                            new URL(
                                './path/to/your/VPNavBarMenu.vue',
                                import.meta.url
                            )
                        )
                    }
               ]
         }
    }
})

then copy the VPNarBarMenu sourcecode and rewrite it:

<script lang="ts" setup>
import { useData } 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 { onMounted, ref } from 'vue'

const { theme } = useData();

// custom code
const versionList = ref([])
onMounted(async ()=>{
    versionList.value = await getYourVersionList()
})
</script>

<template>
    <nav v-if="theme.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 theme.nav" :key="item.text">
            <VPNavBarMenuLink v-if="'link' in item" :item="item" />
            <VPNavBarMenuGroup v-else :item="item" />
        </template>
        <!-- your custom component -->
        <PullDown>
            <Item v-for="version of versionList" ... />
        </PullDown>
    </nav>
</template>

<style scoped>
.VPNavBarMenu {
    display: none;
}

.VPNavBarMenu svg {
    align-self: center;
    margin-right: -6px;
}

@media (min-width: 768px) {
    .VPNavBarMenu {
        display: flex;
    }
}
</style>

[LLLPY]

It sames that it can only work at once(because it work when "setup"). but what if i have a login/logout button. I wanna show the login button when i logged in, logout when i logged out.how to implement it？

[kwesterfeld2]

Answering my own question for others who follow...

I ended up making my own page layout, subclassing the existing one, and importing the nav component I wanted to adapt this way (I wanted to avoid all that code duplication):

<template>
  <layout>
    <template #nav-bar-content-after>
      <VPNavBarMenuGroup v-if="versionMenu" :item="versionMenu" class="version-menu" />
    </template>
  </layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DefaultTheme from 'vitepress/theme'
import VPNavBarMenuGroup from 'vitepress/dist/client/theme-default/components/VPNavBarMenuGroup.vue'

const { Layout } = DefaultTheme

const versionMenu = ref<any>(null)

/// fill in version menu how I wanted

</script>

[kwesterfeld2]

This isn’t really a vitepress question, its a vue question. You would use ref or reactive in setup to make data references that the template binds to. How you determine whether user is logged in or not would be reflected in that. You could also use computed in setup to make it dependent on other data and dynamically updated.

…

________________________________ From: lll ***@***.***> Sent: Saturday, December 16, 2023 8:23:28 AM To: vuejs/vitepress ***@***.***> Cc: Kurt Westerfeld ***@***.***>; Author ***@***.***> Subject: Re: [vuejs/vitepress] How to make a dynamic nav menu? (Discussion #2807) It sames that it can only work at once(because it work when "setup"). but what if i have a login/logout button. I wanna show the login button when i logged in, logout when i logged out.how to implement it？ — Reply to this email directly, view it on GitHub<#2807 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJC6YIQZJ2AN6C2XE3XZNL3YJWOFBAVCNFSM6AAAAAA3UNA6X2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQNZQHE3DI>. You are receiving this because you authored the thread.Message ID: ***@***.***>