1
1
<script lang="ts" setup>
2
2
import { useWindowScroll } from ' @vueuse/core'
3
- import { computed } from ' vue'
3
+ import { ref , watchPostEffect } from ' vue'
4
+ import { useData } from ' ../composables/data'
4
5
import { useSidebar } from ' ../composables/sidebar'
5
6
import VPNavBarAppearance from ' ./VPNavBarAppearance.vue'
6
7
import VPNavBarExtra from ' ./VPNavBarExtra.vue'
@@ -21,11 +22,16 @@ defineEmits<{
21
22
22
23
const { y } = useWindowScroll ()
23
24
const { hasSidebar } = useSidebar ()
25
+ const { frontmatter } = useData ()
24
26
25
- const classes = computed (() => ({
26
- ' has-sidebar' : hasSidebar .value ,
27
- fill: y .value > 0
28
- }))
27
+ const classes = ref <Record <string , boolean >>({})
28
+
29
+ watchPostEffect (() => {
30
+ classes .value = {
31
+ ' has-sidebar' : hasSidebar .value ,
32
+ top: frontmatter .value ?.layout === ' home' && y .value === 0 ,
33
+ }
34
+ })
29
35
</script >
30
36
31
37
<template >
@@ -77,7 +83,7 @@ const classes = computed(() => ({
77
83
padding : 0 ;
78
84
}
79
85
80
- .VPNavBar.fill :not (.has-sidebar ) {
86
+ .VPNavBar :not (.has-sidebar ) :not ( .top ) {
81
87
border-bottom-color : var (--vp-c-gutter );
82
88
background-color : var (--vp-nav-bg-color );
83
89
}
@@ -162,8 +168,7 @@ const classes = computed(() => ({
162
168
}
163
169
164
170
@media (min-width : 960px ) {
165
- .VPNavBar.has-sidebar .content-body ,
166
- .VPNavBar.fill .content-body {
171
+ .VPNavBar :not (.top ) .content-body {
167
172
position : relative ;
168
173
background-color : var (--vp-nav-bg-color );
169
174
}
0 commit comments