fix(theme): fix nav screen and divider appearance (#5369)

src/client/theme-default/components/VPNavBar.vue

@@ -79,7 +79,6 @@ const { isHome, hasSidebar } = useLayout()
 .VPNavBar.screen-open {
   transition: none;
   background-color: var(--vp-nav-bg-color);
-  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .VPNavBar:not(.home) {
@@ -252,19 +251,23 @@ const { isHome, hasSidebar } = useLayout()
 .divider-line {
   width: 100%;
   height: 1px;
-  transition: background-color 0.5s;
+  transition: background-color 0.25s;
 }
 
 .VPNavBar:not(.home) .divider-line {
   background-color: var(--vp-c-gutter);
 }
 
+.VPNavBar.screen-open .divider-line {
+  background-color: var(--vp-c-divider);
+}
+
 @media (min-width: 60rem) {
-  .VPNavBar:not(.home.top) .divider-line {
+  .divider-line {
-    background-color: var(--vp-c-gutter);
+    transition: background-color 0.5s;
   }
 
-  .VPNavBar:not(.has-sidebar):not(.home.top) .divider {
+  .VPNavBar:not(.home.top) .divider-line {
     background-color: var(--vp-c-gutter);
   }
 }

src/client/theme-default/components/VPNavScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useScrollLock } from '@vueuse/core'
+import { useScrollLock, useWindowScroll } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
 import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
 import VPNavScreenMenu from './VPNavScreenMenu.vue'
@@ -11,6 +11,7 @@ defineProps<{
 }>()
 
 const isLocked = useScrollLock(inBrowser ? document.body : null)
+const { y } = useWindowScroll()
 </script>
 
 <template>
@@ -19,7 +20,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
-    <div v-if="open" class="VPNavScreen" id="VPNavScreen">
+    <div v-if="open" class="VPNavScreen" id="VPNavScreen" :style="{ '--vp-y': y + 'px' }">
       <div class="container">
         <slot name="nav-screen-content-before" />
         <VPNavScreenMenu class="menu" />
@@ -35,13 +36,15 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
+  /* reserve 1px for the VPNavBar divider */
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px - var(--vp-y));
   /*rtl:ignore*/
   right: 0;
   bottom: 0;
   /*rtl:ignore*/
   left: 0;
   padding: 0 2rem;
+  padding-top: var(--vp-y);
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);
   overflow-y: auto;