feat(theme): add --vt-layout-top-height to adjust banner (#1521)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

Author: ylw5

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 {

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;
 }
 

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;
   }
 }
 

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%;

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;

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);

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;
 }
 
 /**