fix(theme): highlight active link in mobile nav menu (#5086) (closes #5068, closes #5074)

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

@@ -2,6 +2,7 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed, inject } from 'vue'
 import { useData } from '../composables/data'
+import { isActive } from '../../shared'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
@@ -17,12 +18,20 @@ const href = computed(() =>
     : props.item.link
 )
 
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
-    class="VPNavScreenMenuGroupLink"
+    :class="{ VPNavScreenMenuGroupLink: true, active: isActiveLink }"
     :href
     :target="item.target"
     :rel="item.rel"
@@ -47,4 +56,8 @@ const { closeScreen } = inject(navInjectionKey)!
 .VPNavScreenMenuGroupLink:hover {
   color: var(--vp-c-brand-1);
 }
+
+.VPNavScreenMenuGroupLink.active {
+  color: var(--vp-c-brand-1);
+}
 </style>

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

@@ -2,6 +2,7 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed, inject } from 'vue'
 import { useData } from '../composables/data'
+import { isActive } from '../../shared'
 import { navInjectionKey } from '../composables/nav'
 import VPLink from './VPLink.vue'
 
@@ -17,12 +18,20 @@ const href = computed(() =>
     : props.item.link
 )
 
+const isActiveLink = computed(() =>
+  isActive(
+    page.value.relativePath,
+    props.item.activeMatch || href.value,
+    !!props.item.activeMatch
+  )
+)
+
 const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
   <VPLink
-    class="VPNavScreenMenuLink"
+    :class="{ VPNavScreenMenuLink: true, active: isActiveLink }"
     :href
     :target="item.target"
     :rel="item.rel"
@@ -50,4 +59,8 @@ const { closeScreen } = inject(navInjectionKey)!
 .VPNavScreenMenuLink:hover {
   color: var(--vp-c-brand-1);
 }
+
+.VPNavScreenMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
 </style>