fix(theme): navbar menu group is incorrectly highlighted (#5113)

---------

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: WizardsBowl

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

@@ -18,20 +18,22 @@ const href = computed(() =>
     : props.item.link
 )
 
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
+
 defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
   <div class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
-      :class="{
-        active: isActive(
-          page.relativePath,
-          item.activeMatch || href,
-          !!item.activeMatch
-        )
-      }"
+      :class="{ active: isActiveLink }"
       :href
       :target="item.target"
       :rel="props.rel ?? item.rel"

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

@@ -11,31 +11,36 @@ const props = defineProps<{
 
 const { page } = useData()
 
-const isChildActive = (navItem: DefaultTheme.NavItem) => {
+const isActiveGroup = computed(() => {
+  if (props.item.activeMatch) {
+    return isActive(page.value.relativePath, props.item.activeMatch, true)
+  }
+  return isChildActive(props.item)
+})
+
+function isChildActive(navItem: DefaultTheme.NavItem): boolean {
   if ('component' in navItem) return false
 
   if ('link' in navItem) {
+    const href =
+      typeof navItem.link === 'function'
+        ? navItem.link(page.value)
+        : navItem.link
+
     return isActive(
       page.value.relativePath,
-      typeof navItem.link === "function" ? navItem.link(page.value) : navItem.link,
-      !!props.item.activeMatch
+      navItem.activeMatch || href,
+      !!navItem.activeMatch
     )
   }
 
   return navItem.items.some(isChildActive)
 }
-
-const childrenActive = computed(() => isChildActive(props.item))
 </script>
 
 <template>
   <VPFlyout
-    :class="{
-      VPNavBarMenuGroup: true,
-      active:
-        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
-        childrenActive
-    }"
+    :class="{ VPNavBarMenuGroup: true, active: isActiveGroup }"
     :button="item.text"
     :items="item.items"
   />

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

@@ -16,18 +16,19 @@ const href = computed(() =>
     ? props.item.link(page.value)
     : props.item.link
 )
+
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
 </script>
 
 <template>
   <VPLink
-    :class="{
-      VPNavBarMenuLink: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch || href,
-        !!item.activeMatch
-      )
-    }"
+    :class="{ VPNavBarMenuLink: true, active: isActiveLink }"
     :href
     :target="item.target"
     :rel="item.rel"