feat: highlight nav by default when one of the items is matched (#2893)

Author: evanryuu

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

@@ -1,14 +1,29 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPFlyout from './VPFlyout.vue'
 
-defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
 
 const { page } = useData()
+
+const isChildActive = (navItem: DefaultTheme.NavItem) => {
+  if ('link' in navItem) {
+    return isActive(
+      page.value.relativePath,
+      navItem.link,
+      !!props.item.activeMatch
+    )
+  } else {
+    return navItem.items.some(isChildActive)
+  }
+}
+
+const childrenActive = computed(() => isChildActive(props.item))
 </script>
 
 <template>
@@ -19,7 +34,7 @@ const { page } = useData()
         page.relativePath,
         item.activeMatch,
         !!item.activeMatch
-      )
+      ) || childrenActive
     }"
     :button="item.text"
     :items="item.items"