feat(theme): allow link on nav item with children

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

@@ -5,7 +5,7 @@ import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: DefaultTheme.NavItem
 }>()
 
 const { page } = useData()

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

@@ -6,21 +6,16 @@ import { isActive } from '../../shared'
 import VPFlyout from './VPFlyout.vue'
 
 const props = defineProps<{
-  item: DefaultTheme.NavItemWithChildren
+  item: DefaultTheme.NavItem
 }>()
 
 const { page } = useData()
 
 const isChildActive = (navItem: DefaultTheme.NavItem) => {
-  if ('link' in navItem) {
+  return (
-    return isActive(
+    isActive(page.value.relativePath, navItem.link, !!props.item.activeMatch) ||
-      page.value.relativePath,
+    navItem.items?.some(isChildActive)
-      navItem.link,
+  )
-      !!props.item.activeMatch
-    )
-  } else {
-    return navItem.items.some(isChildActive)
-  }
 }
 
 const childrenActive = computed(() => isChildActive(props.item))
@@ -30,11 +25,9 @@ const childrenActive = computed(() => isChildActive(props.item))
   <VPFlyout
     :class="{
       VPNavBarMenuGroup: true,
-      active: isActive(
+      active:
-        page.relativePath,
+        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
-        item.activeMatch,
+        childrenActive
-        !!item.activeMatch
-      ) || childrenActive
     }"
     :button="item.text"
     :items="item.items"

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

@@ -5,7 +5,7 @@ import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: DefaultTheme.NavItem
 }>()
 
 const { page } = useData()

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

@@ -9,15 +9,15 @@ const { theme } = useData()
 <template>
   <nav v-if="theme.nav" class="VPNavScreenMenu">
     <template v-for="item in theme.nav" :key="item.text">
-      <VPNavScreenMenuLink
-        v-if="'link' in item"
-        :item="item"
-      />
       <VPNavScreenMenuGroup
-        v-else
+        v-if="item.items"
         :text="item.text || ''"
         :items="item.items"
       />
+      <VPNavScreenMenuLink
+        v-else
+        :item="item"
+      />
     </template>
   </nav>
 </template>

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

@@ -4,7 +4,7 @@ import { inject } from 'vue'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: DefaultTheme.NavItem
 }>()
 
 const closeScreen = inject('close-screen') as () => void

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

@@ -4,7 +4,7 @@ import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{
   text?: string
-  items: DefaultTheme.NavItemWithLink[]
+  items: DefaultTheme.NavItem[]
 }>()
 </script>
 

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

@@ -4,7 +4,7 @@ import { inject } from 'vue'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: DefaultTheme.NavItem
 }>()
 
 const closeScreen = inject('close-screen') as () => void

types/default-theme.d.ts

@@ -149,12 +149,10 @@ export namespace DefaultTheme {
 
   // nav -----------------------------------------------------------------------
 
-  export type NavItem = NavItemWithLink | NavItemWithChildren
+  export interface NavItem {
-
-  export interface NavItemWithLink {
     text: string
-    link: string
+    link?: string
-    items?: never
+    items?: NavItem[]
 
     /**
      * `activeMatch` is expected to be a regex string. We can't use actual
@@ -165,22 +163,6 @@ export namespace DefaultTheme {
     rel?: string
   }
 
-  export interface NavItemChildren {
-    text?: string
-    items: NavItemWithLink[]
-  }
-
-  export interface NavItemWithChildren {
-    text?: string
-    items: (NavItemChildren | NavItemWithLink)[]
-
-    /**
-     * `activeMatch` is expected to be a regex string. We can't use actual
-     * RegExp object here because it isn't serializable
-     */
-    activeMatch?: string
-  }
-
   // image ---------------------------------------------------------------------
 
   export type ThemeableImage =