From fcd7642924331e81e85ee75a1224a04d1882531c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E8=B0=A6?= <miqilin18@gmail.com>
Date: Sat, 2 Jul 2022 16:12:10 +0800
Subject: [PATCH] fix(theme): close menu on route change (#887)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 src/client/theme-default/Layout.vue             | 6 +++++-
 src/client/theme-default/components/VPDoc.vue   | 7 +++++--
 src/client/theme-default/composables/nav.ts     | 5 ++++-
 src/client/theme-default/composables/sidebar.ts | 8 +++-----
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 7af05e9d..5087ee46 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { provide, watch } from 'vue'
+import { useRoute } from 'vitepress'
 import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar'
 import VPSkipLink from './components/VPSkipLink.vue'
 import VPBackdrop from './components/VPBackdrop.vue'
@@ -15,6 +16,9 @@ const {
   close: closeSidebar
 } = useSidebar()
 
+const route = useRoute()
+watch(() => route.path, closeSidebar)
+
 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 
 provide('close-sidebar', closeSidebar)
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index f7a9c17c..c5576678 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useRoute } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
-const { path } = useRoute()
+const route = useRoute()
 const { hasSidebar } = useSidebar()
 
-const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
+const pageName = computed(() =>
+  route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
+)
 </script>
 
 <template>
diff --git a/src/client/theme-default/composables/nav.ts b/src/client/theme-default/composables/nav.ts
index 4d24c01c..e3cf686b 100644
--- a/src/client/theme-default/composables/nav.ts
+++ b/src/client/theme-default/composables/nav.ts
@@ -1,5 +1,5 @@
 import type { DefaultTheme } from 'vitepress/theme'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useData, useRoute } from 'vitepress'
 
 export function useNav() {
@@ -26,6 +26,9 @@ export function useNav() {
     window.outerWidth >= 768 && closeScreen()
   }
 
+  const route = useRoute()
+  watch(() => route.path, closeScreen)
+
   return {
     isScreenOpen,
     openScreen,
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 40f725c8..7baedde4 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -1,5 +1,5 @@
-import { Ref, ref, computed, watchEffect, onMounted, onUnmounted } from 'vue'
-import { useRoute, useData } from 'vitepress'
+import { computed, onMounted, onUnmounted, Ref, ref, watchEffect } from 'vue'
+import { useData, useRoute } from 'vitepress'
 import { getSidebar } from '../support/sidebar'
 
 export function useSidebar() {
@@ -10,9 +10,7 @@ export function useSidebar() {
 
   const sidebar = computed(() => {
     const sidebarConfig = theme.value.sidebar
-    const relativePath = route.data.relativePath
-
-    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
+    return sidebarConfig ? getSidebar(sidebarConfig, route.path) : []
   })
 
   const hasSidebar = computed(() => {