feat: allow using components in menu items

src/client/theme-default/components/VPMenu.vue

@@ -12,6 +12,7 @@ defineProps<{
     <div v-if="items" class="items">
       <template v-for="item in items" :key="item.text">
         <VPMenuLink v-if="'link' in item" :item="item" />
+        <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
       </template>
     </div>

src/client/theme-default/components/VPNavBarMenu.vue

@@ -11,6 +11,7 @@ const { theme } = useData()
     <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" />
+      <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
       <VPNavBarMenuGroup v-else :item="item" />
     </template>
   </nav>

src/client/theme-default/components/VPNavBarMenuGroup.vue

@@ -14,10 +14,12 @@ const { page } = useData()
 const isChildActive = (navItem: DefaultTheme.NavItem) => {
   if ('link' in navItem) {
     return isActive(
-      page.value.relativePath,
-      navItem.link,
-      !!props.item.activeMatch
+        page.value.relativePath,
+        navItem.link,
+        !!props.item.activeMatch
     )
+  } else if ('component' in navItem) {
+    return false
   } else {
     return navItem.items.some(isChildActive)
   }

src/client/theme-default/components/VPNavScreenMenu.vue

@@ -13,6 +13,7 @@ const { theme } = useData()
         v-if="'link' in item"
         :item="item"
       />
+      <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
       <VPNavScreenMenuGroup
         v-else
         :text="item.text || ''"

types/default-theme.d.ts

@@ -162,7 +162,12 @@ export namespace DefaultTheme {
 
   // nav -----------------------------------------------------------------------
 
-  export type NavItem = NavItemWithLink | NavItemWithChildren
+  export type NavItem = NavItemComponent | NavItemWithLink | NavItemWithChildren
+
+  export interface NavItemComponent {
+    text: string
+    component: string
+  }
 
   export interface NavItemWithLink {
     text: string