From d943144abb6e48a3fbaf34b90642d5d19be2cfae Mon Sep 17 00:00:00 2001
From: ylw5 <767138650@qq.com>
Date: Fri, 21 Oct 2022 17:44:22 +0800
Subject: [PATCH 1/5] feat: add --vt-layout-top-height to adjust banner

---
 src/client/theme-default/components/VPContent.vue   | 2 +-
 src/client/theme-default/components/VPDoc.vue       | 6 +++---
 src/client/theme-default/components/VPHero.vue      | 8 ++++----
 src/client/theme-default/components/VPNav.vue       | 2 +-
 src/client/theme-default/components/VPNavScreen.vue | 2 +-
 src/client/theme-default/components/VPSidebar.vue   | 2 +-
 src/client/theme-default/styles/vars.css            | 7 ++++---
 7 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 86aca8623de..1c240d48821 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-top: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 53322ba6b5d..76c7f0735e6 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vt-layout-top-height ,0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 6b283761ab8..ce6176e1259 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc(var(--vp-nav-height) * -1);
-  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vt-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 96b6e5e6964..638441ec7aa 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: 0;
+  top: var(--vt-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index a306f40d66d..4e8a27bf11c 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: var(--vp-nav-height-mobile);
+  top: calc(var(--vp-nav-height-mobile) + var(--vt-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index f4b3f67d0c1..6a58bda1e67 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: 0;
+  top: var(--vt-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index dff17f20425..e377369ef29 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -172,9 +172,10 @@
 :root {
   --vp-z-index-local-nav: 10;
   --vp-z-index-nav: 20;
-  --vp-z-index-backdrop: 30;
-  --vp-z-index-sidebar: 40;
-  --vp-z-index-footer: 50;
+  --vp-z-index-layout-top: 30;
+  --vp-z-index-backdrop: 40;
+  --vp-z-index-sidebar: 50;
+  --vp-z-index-footer: 60;
 }
 
 /**

From 6fecc6e755a09516909db34eb4a93e3ca826d50b Mon Sep 17 00:00:00 2001
From: ylw5 <767138650@qq.com>
Date: Fri, 21 Oct 2022 22:17:13 +0800
Subject: [PATCH 2/5] chore: make --vp- instead of --vt-

---
 src/client/theme-default/components/VPContent.vue   | 2 +-
 src/client/theme-default/components/VPDoc.vue       | 6 +++---
 src/client/theme-default/components/VPHero.vue      | 8 ++++----
 src/client/theme-default/components/VPNav.vue       | 2 +-
 src/client/theme-default/components/VPNavScreen.vue | 2 +-
 src/client/theme-default/components/VPSidebar.vue   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 1c240d48821..8c11a740462 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px));
+    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 76c7f0735e6..17ef53f76fa 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc((var(--vp-nav-height-desktop) + var(--vt-layout-top-height ,0px)) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height ,0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index ce6176e1259..4e764c27152 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc((var(--vp-nav-height) + var(--vt-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 638441ec7aa..19b7e6399fc 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: var(--vt-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 4e8a27bf11c..1d4d58baa4c 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height-mobile) + var(--vt-layout-top-height, 0px));
+  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 6a58bda1e67..c7d1d382564 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: var(--vt-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);

From 98b569c2e85099b4eeb5343a1db538164d30052c Mon Sep 17 00:00:00 2001
From: ylw5 <767138650@qq.com>
Date: Fri, 21 Oct 2022 17:44:22 +0800
Subject: [PATCH 3/5] feat: add --vt-layout-top-height to adjust banner

---
 src/client/theme-default/components/VPContent.vue   | 2 +-
 src/client/theme-default/components/VPDoc.vue       | 6 +++---
 src/client/theme-default/components/VPHero.vue      | 8 ++++----
 src/client/theme-default/components/VPNav.vue       | 2 +-
 src/client/theme-default/components/VPNavScreen.vue | 2 +-
 src/client/theme-default/components/VPSidebar.vue   | 2 +-
 src/client/theme-default/styles/vars.css            | 7 ++++---
 7 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 86aca8623de..1c240d48821 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-top: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 53322ba6b5d..76c7f0735e6 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vt-layout-top-height ,0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 6b283761ab8..ce6176e1259 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc(var(--vp-nav-height) * -1);
-  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vt-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 96b6e5e6964..638441ec7aa 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: 0;
+  top: var(--vt-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index a306f40d66d..4e8a27bf11c 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: var(--vp-nav-height-mobile);
+  top: calc(var(--vp-nav-height-mobile) + var(--vt-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index f4b3f67d0c1..6a58bda1e67 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: 0;
+  top: var(--vt-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index dff17f20425..e377369ef29 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -172,9 +172,10 @@
 :root {
   --vp-z-index-local-nav: 10;
   --vp-z-index-nav: 20;
-  --vp-z-index-backdrop: 30;
-  --vp-z-index-sidebar: 40;
-  --vp-z-index-footer: 50;
+  --vp-z-index-layout-top: 30;
+  --vp-z-index-backdrop: 40;
+  --vp-z-index-sidebar: 50;
+  --vp-z-index-footer: 60;
 }
 
 /**

From 81a7b51cb5b44d07b7e327a5d9cbede54fcbae38 Mon Sep 17 00:00:00 2001
From: ylw5 <767138650@qq.com>
Date: Fri, 21 Oct 2022 22:17:13 +0800
Subject: [PATCH 4/5] chore: make --vp- instead of --vt-

---
 src/client/theme-default/components/VPContent.vue   | 2 +-
 src/client/theme-default/components/VPDoc.vue       | 6 +++---
 src/client/theme-default/components/VPHero.vue      | 8 ++++----
 src/client/theme-default/components/VPNav.vue       | 2 +-
 src/client/theme-default/components/VPNavScreen.vue | 2 +-
 src/client/theme-default/components/VPSidebar.vue   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 1c240d48821..8c11a740462 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px));
+    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 76c7f0735e6..17ef53f76fa 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc((var(--vp-nav-height-desktop) + var(--vt-layout-top-height ,0px)) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height ,0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vt-layout-top-height, 0px) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index ce6176e1259..4e764c27152 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc((var(--vp-nav-height) + var(--vt-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vt-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 638441ec7aa..19b7e6399fc 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: var(--vt-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
index 4e8a27bf11c..1d4d58baa4c 100644
--- a/src/client/theme-default/components/VPNavScreen.vue
+++ b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height-mobile) + var(--vt-layout-top-height, 0px));
+  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 6a58bda1e67..c7d1d382564 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: var(--vt-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);

From 1c6c4b4517fc1359f05e14b77ca0387d4f3a2052 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 24 Oct 2022 23:24:14 +0530
Subject: [PATCH 5/5] chore: format

---
 src/client/theme-default/components/VPDoc.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 17ef53f76fa..89d18912726 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -120,7 +120,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height ,0px)) * -1 - 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
   padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;