feat: add active style to VPFlyout, NavbarGroup can active now.

docs/.vitepress/config.ts

@@ -44,11 +44,15 @@ export default defineConfig({
 
 function nav() {
   return [
-    { text: 'Guide', link: '/guide/what-is-vitepress', activeMatch: '/guide/' },
+    // { text: 'Guide', link: '/guide/what-is-vitepress', activeMatch: '/guide/' },
     { text: 'Configs', link: '/config/introduction', activeMatch: '/config/' },
     {
       text: 'Changelog',
       link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md'
+    },{
+      text:'Gruop Nav',  
+      activeMatch: '/guide/',
+      items: [{ text: 'Guide', link: '/guide/what-is-vitepress', },]
     }
   ]
 }

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

@@ -23,20 +23,9 @@ function onBlur() {
 </script>
 
 <template>
-  <div
+  <div class="VPFlyout" ref="el" @mouseenter="open = true" @mouseleave="open = false">
-    class="VPFlyout"
+    <button type="button" class="button" aria-haspopup="true" :aria-expanded="open" :aria-label="label"
-    ref="el"
+      @click="open = !open">
-    @mouseenter="open = true"
-    @mouseleave="open = false"
-  >
-    <button
-      type="button"
-      class="button"
-      aria-haspopup="true"
-      :aria-expanded="open"
-      :aria-label="label"
-      @click="open = !open"
-    >
       <span v-if="button || icon" class="text">
         <component v-if="icon" :is="icon" class="option-icon" />
         {{ button }}
@@ -59,6 +48,10 @@ function onBlur() {
   position: relative;
 }
 
+.VPFlyout.active .text {
+  color: var(--vp-c-brand);
+}
+
 .VPFlyout:hover {
   color: var(--vp-c-bland);
   transition: color 0.25s;
@@ -73,7 +66,7 @@ function onBlur() {
 }
 
 .VPFlyout:hover .menu,
-.button[aria-expanded="true"] + .menu {
+.button[aria-expanded="true"]+.menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);

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

@@ -1,12 +1,20 @@
 <script lang="ts" setup>
 import type { DefaultTheme } from 'vitepress/theme'
 import VPFlyout from './VPFlyout.vue'
+import { useData } from 'vitepress'
+import { isActive } from '../support/utils'
 
 defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
+const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout :button="item.text" :items="item.items" />
+  <VPFlyout :class="{
-</template>
+    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 -----------------------------------------------------------------------