From a29a4a62c682b54ec88c609cb480ddb68b3f4699 Mon Sep 17 00:00:00 2001
From: ylw5 <93325995+ylw5@users.noreply.github.com>
Date: Tue, 25 Oct 2022 02:22:07 +0800
Subject: [PATCH] feat(theme): add --vt-layout-top-height to adjust banner
 (#1521)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 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..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: var(--vp-nav-height);
+    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 53322ba6b5d..89d18912726 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(--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) + 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 6b283761ab8..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) * -1);
-  padding: calc(var(--vp-nav-height) + 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) + 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) + 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 96b6e5e6964..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: 0;
+  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 a306f40d66d..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: var(--vp-nav-height-mobile);
+  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 f4b3f67d0c1..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: 0;
+  top: var(--vp-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 7740055779f..d81c78309fd 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;
 }
 
 /**