From fd46dc9b8f8951b3196e4208d958d1ca0e1dc6e8 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Sat, 16 Sep 2023 19:08:54 +0800
Subject: [PATCH] fix(theme): remove extra padding from top when navbar is
 hidden (#2575)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 src/client/theme-default/Layout.vue           |  2 +-
 src/client/theme-default/components/VPNav.vue | 17 +++++++++++++++--
 src/client/theme-default/styles/vars.css      |  8 ++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 52bb16b23529..0ecca7ecd6f7 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -35,7 +35,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav v-if="frontmatter.navbar !== false">
+    <VPNav>
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index b654a043fd09..577c8eceaded 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -1,16 +1,29 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { inBrowser } from 'vitepress'
+import { computed, provide, watchEffect } from 'vue'
+import { useData } from '../composables/data'
 import { useNav } from '../composables/nav'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { frontmatter } = useData()
+
+const hasNavbar = computed(() => {
+  return frontmatter.value.navbar !== false
+})
 
 provide('close-screen', closeScreen)
+
+watchEffect(() => {
+  if (inBrowser) {
+    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
+  }
+})
 </script>
 
 <template>
-  <header class="VPNav">
+  <header v-if="hasNavbar" class="VPNav">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 00f973437998..3ebcac17d954 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -426,6 +426,14 @@
   --vp-nav-logo-height: 24px;
 }
 
+.hide-nav {
+  --vp-nav-height: 0px;
+}
+
+.hide-nav .VPSidebar {
+  --vp-nav-height: 22px;
+}
+
 /**
  * Component: Local Nav
  * -------------------------------------------------------------------------- */