From 0fc32a10b2e35b08c75bc462bb91a0c6d74d2981 Mon Sep 17 00:00:00 2001
From: casyalex <casyalex@hotmail.com>
Date: Mon, 20 Jun 2022 16:46:19 +0800
Subject: [PATCH 1/6] feat: add active style to VPFlyout, NavbarGroup can
 active now.

---
 docs/.vitepress/config.ts                     |  6 ++++-
 .../theme-default/components/VPFlyout.vue     | 23 +++++++------------
 .../components/VPNavBarMenuGroup.vue          | 12 ++++++++--
 types/default-theme.d.ts                      |  6 +++++
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 23eeac47de98..d8ea0354e9f3 100644
--- a/docs/.vitepress/config.ts
+++ b/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', },]
     }
   ]
 }
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index f4a3c98201bb..e204dc0daba0 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -23,20 +23,9 @@ function onBlur() {
 </script>
 
 <template>
-  <div
-    class="VPFlyout"
-    ref="el"
-    @mouseenter="open = true"
-    @mouseleave="open = false"
-  >
-    <button
-      type="button"
-      class="button"
-      aria-haspopup="true"
-      :aria-expanded="open"
-      :aria-label="label"
-      @click="open = !open"
-    >
+  <div class="VPFlyout" ref="el" @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);
diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 4141fb8ee1e4..13c0267ec459 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/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" />
-</template>
+  <VPFlyout :class="{
+    VPNavBarMenuGroup: true,
+    active: isActive(page.relativePath,
+      item.activeMatch,
+      !!item.activeMatch)
+  }" :button="item.text" :items="item.items" />
+</template>
\ No newline at end of file
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 945773672e6f..26c02dfda323 100644
--- a/types/default-theme.d.ts
+++ b/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 -----------------------------------------------------------------------

From fa65c49a3f99a6499df6a82084b666cd4900b0c1 Mon Sep 17 00:00:00 2001
From: casyalex <casyalex@hotmail.com>
Date: Mon, 20 Jun 2022 18:53:57 +0800
Subject: [PATCH 2/6] chore: revert unnecessary change

---
 docs/.vitepress/config.ts                     |  8 ++------
 .../theme-default/components/VPFlyout.vue     | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index d8ea0354e9f3..5bbcd727301f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -44,16 +44,12 @@ 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', },]
-    }
+    },
   ]
 }
 
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index e204dc0daba0..fc10b82aa530 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -23,9 +23,20 @@ function onBlur() {
 </script>
 
 <template>
-  <div class="VPFlyout" ref="el" @mouseenter="open = true" @mouseleave="open = false">
-    <button type="button" class="button" aria-haspopup="true" :aria-expanded="open" :aria-label="label"
-      @click="open = !open">
+  <div
+    class="VPFlyout"
+    ref="el"
+    @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 }}
@@ -66,7 +77,7 @@ function onBlur() {
 }
 
 .VPFlyout:hover .menu,
-.button[aria-expanded="true"]+.menu {
+.button[aria-expanded="true"] + .menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);

From 9d61b160de53d419be5e73e9999b70f094550714 Mon Sep 17 00:00:00 2001
From: casyalex <casyalex@hotmail.com>
Date: Mon, 20 Jun 2022 18:58:38 +0800
Subject: [PATCH 3/6] chore

---
 docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5bbcd727301f..23eeac47de98 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -49,7 +49,7 @@ function nav() {
     {
       text: 'Changelog',
       link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md'
-    },
+    }
   ]
 }
 

From 2fb4ea82847651b6ab4951bddf1fb3a0cd866964 Mon Sep 17 00:00:00 2001
From: casyalex <casyalex@hotmail.com>
Date: Mon, 20 Jun 2022 19:30:28 +0800
Subject: [PATCH 4/6] chore: adjust indent.

---
 .../components/VPNavBarMenuGroup.vue           | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 13c0267ec459..1bf986d226d4 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavBarMenuGroup.vue
@@ -11,10 +11,16 @@ const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout :class="{
-    VPNavBarMenuGroup: true,
-    active: isActive(page.relativePath,
-      item.activeMatch,
-      !!item.activeMatch)
-  }" :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>
\ No newline at end of file

From 227ad04ecef61e0a775cb4cf73486f83597a4a8f Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Wed, 22 Jun 2022 00:33:03 +0900
Subject: [PATCH 5/6] style: format

---
 src/client/theme-default/components/VPFlyout.vue     | 12 ++++++++----
 .../theme-default/components/VPNavBarMenuGroup.vue   |  7 ++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index fc10b82aa530..b585f1b4167b 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -59,10 +59,6 @@ function onBlur() {
   position: relative;
 }
 
-.VPFlyout.active .text {
-  color: var(--vp-c-brand);
-}
-
 .VPFlyout:hover {
   color: var(--vp-c-bland);
   transition: color 0.25s;
@@ -76,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;
diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue
index 1bf986d226d4..0a6c9483fb20 100644
--- a/src/client/theme-default/components/VPNavBarMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavBarMenuGroup.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import VPFlyout from './VPFlyout.vue'
 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>
 
@@ -23,4 +24,4 @@ const { page } = useData()
     :button="item.text"
     :items="item.items"
   />
-</template>
\ No newline at end of file
+</template>

From ae6bcc5b2bb0e03148514b85833d0df3e18aa27e Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Wed, 22 Jun 2022 00:33:09 +0900
Subject: [PATCH 6/6] docs: add docs

---
 docs/config/theme-configs.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index 37564b783a7b..4ebfdc8723c1 100644
--- a/docs/config/theme-configs.md
+++ b/docs/config/theme-configs.md
@@ -83,6 +83,7 @@ type NavItemWithLink = {
 interface NavItemWithChildren {
   text?: string
   items: NavItemWithLink[]
+  activeMatch?: string
 }
 ```