From b1fbece047ca503f2c59553f9e37a0aac4be52c9 Mon Sep 17 00:00:00 2001
From: Evan Liu <55378595+evanryuu@users.noreply.github.com>
Date: Sun, 10 Sep 2023 23:05:48 +0800
Subject: [PATCH] feat: highlight nav by default when one of the items is
 matched (#2893)

---
 .../components/VPNavBarMenuGroup.vue          | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 405ac78a..a38eded4 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/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"