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

vuejs · Jun 30, 2024 · 0fc70e2 · 0fc70e2
1 parent d348da7
commit 0fc70e2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
@@ -12,7 +12,7 @@ import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarTranslations from './VPNavBarTranslations.vue'
 
-defineProps<{
+const props = defineProps<{
   isScreenOpen: boolean
 }>()
 
@@ -31,6 +31,7 @@ watchPostEffect(() => {
     'has-sidebar': hasSidebar.value,
     'home': frontmatter.value.layout === 'home',
     'top': y.value === 0,
+    'screen-open': props.isScreenOpen
   }
 })
 </script>
@@ -74,7 +75,13 @@ watchPostEffect(() => {
   height: var(--vp-nav-height);
   pointer-events: none;
   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) {

diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
@@ -37,7 +37,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .VPNavScreen {
   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*/
   right: 0;
   bottom: 0;
@@ -47,7 +47,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;
-  transition: background-color 0.5s;
+  transition: background-color 0.25s;
   pointer-events: auto;
 }