From 6e0584f21e70761ee68fa02f5786b22b38814149 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 2 Jul 2022 13:38:32 +0530
Subject: [PATCH] fix: close sidebar and nav menu on route change

---
 src/client/theme-default/Layout.vue             | 10 +---------
 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, 13 insertions(+), 17 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index cef6450e..5087ee46 100644
--- a/src/client/theme-default/Layout.vue
+++ b/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)
 
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(() => {