fix: close sidebar and nav menu on route change

src/client/theme-default/Layout.vue

@@ -16,16 +16,8 @@ const {
   close: closeSidebar
 } = useSidebar()
 
-const handleCloseSideBar = () => {
-  if (isSidebarOpen) {
-    closeSidebar()
-  }
-}
-
-window.addEventListener('hashchange', handleCloseSideBar)
-
 const route = useRoute()
-watch(() => route.path, handleCloseSideBar)
+watch(() => route.path, closeSidebar)
 
 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 

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>

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,

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(() => {