feat(theme): add active status to nav menu group (#820)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>

Author: casyalex

docs/config/theme-configs.md

@@ -83,6 +83,7 @@ type NavItemWithLink = {
 interface NavItemWithChildren {
   text?: string
   items: NavItemWithLink[]
+  activeMatch?: string
 }
 ```
 

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

@@ -72,6 +72,14 @@ function onBlur() {
   fill: var(--vp-c-text-2);
 }
 
+.VPFlyout.active .text {
+  color: var(--vp-c-brand);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-dark);
+}
+
 .VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;

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

@@ -1,12 +1,27 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import type { DefaultTheme } from 'vitepress/theme'
+import { isActive } from '../support/utils'
 import VPFlyout from './VPFlyout.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
+
+const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout :button="item.text" :items="item.items" />
+  <VPFlyout
+    :class="{
+      VPNavBarMenuGroup: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch,
+        !!item.activeMatch
+      )
+    }"
+    :button="item.text"
+    :items="item.items"
+  />
 </template>

types/default-theme.d.ts

@@ -94,6 +94,12 @@ export namespace DefaultTheme {
   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 -----------------------------------------------------------------------