fix(theme): remove extra padding from top when navbar is hidden (#2575)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
pull/2977/head
bqy_fe 1 year ago committed by GitHub
parent 0cd87b1baf
commit fd46dc9b8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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>

@ -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>

@ -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
* -------------------------------------------------------------------------- */

Loading…
Cancel
Save