fix(theme): show filled nav bar when nav screen is open

pull/3901/merge
Divyansh Singh 6 months ago
parent d348da770c
commit 0fc70e2d0c

@ -12,7 +12,7 @@ import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
import VPNavBarTitle from './VPNavBarTitle.vue' import VPNavBarTitle from './VPNavBarTitle.vue'
import VPNavBarTranslations from './VPNavBarTranslations.vue' import VPNavBarTranslations from './VPNavBarTranslations.vue'
defineProps<{ const props = defineProps<{
isScreenOpen: boolean isScreenOpen: boolean
}>() }>()
@ -31,6 +31,7 @@ watchPostEffect(() => {
'has-sidebar': hasSidebar.value, 'has-sidebar': hasSidebar.value,
'home': frontmatter.value.layout === 'home', 'home': frontmatter.value.layout === 'home',
'top': y.value === 0, 'top': y.value === 0,
'screen-open': props.isScreenOpen
} }
}) })
</script> </script>
@ -74,7 +75,13 @@ watchPostEffect(() => {
height: var(--vp-nav-height); height: var(--vp-nav-height);
pointer-events: none; pointer-events: none;
white-space: nowrap; white-space: nowrap;
transition: background-color 0.5s; transition: background-color 0.25s;
}
.VPNavBar.screen-open {
transition: none;
background-color: var(--vp-nav-bg-color);
border-bottom: 1px solid var(--vp-c-divider);
} }
.VPNavBar:not(.home) { .VPNavBar:not(.home) {

@ -37,7 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
<style scoped> <style scoped>
.VPNavScreen { .VPNavScreen {
position: fixed; position: fixed;
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px); top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
/*rtl:ignore*/ /*rtl:ignore*/
right: 0; right: 0;
bottom: 0; bottom: 0;
@ -47,7 +47,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
width: 100%; width: 100%;
background-color: var(--vp-nav-screen-bg-color); background-color: var(--vp-nav-screen-bg-color);
overflow-y: auto; overflow-y: auto;
transition: background-color 0.5s; transition: background-color 0.25s;
pointer-events: auto; pointer-events: auto;
} }

Loading…
Cancel
Save