From 9c0ed9397f35827a261d45c789d23ce7faa7ecee Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 6 Jun 2022 11:20:31 +0530
Subject: [PATCH] fix: page layout breaks when page name matches the css class
 name (#696) (#699)

fix: #696

To fix the issue, make the page name inside VPDoc use a complete path.
---
 src/client/theme-default/components/VPDoc.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index d817351e3bf..05069204d8a 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from 'vitepress'
+import { useRoute } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
-const { page } = useData()
+const { path } = useRoute()
 const { hasSidebar } = useSidebar()
 
-const pageName = computed(() => {
-  return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
-})
+const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
 </script>
 
 <template>