perf(theme): 优化导航栏交互

pengzhanbo · Jul 15, 2024 · 4501a16 · 4501a16
1 parent fc23e49
commit 4501a16
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
@@ -12,7 +12,7 @@ import VPNavBarTranslations from '@theme/Nav/VPNavBarTranslations.vue'
 import { useData } from '../../composables/data.js'
 import { useSidebar } from '../../composables/sidebar.js'
 
-defineProps<{
+const props = defineProps<{
   isScreenOpen: boolean
 }>()
 defineEmits<(e: 'toggleScreen') => void>()
@@ -28,6 +28,7 @@ watchPostEffect(() => {
     'has-sidebar': hasSidebar.value,
     'home': frontmatter.value.pageLayout === 'home',
     'top': y.value === 0,
+    'screen-open': props.isScreenOpen,
   }
 })
 </script>
@@ -83,6 +84,12 @@ watchPostEffect(() => {
   transition-property: background-color, color, border-bottom;
 }
 
+.vp-navbar.screen-open {
+  background-color: var(--vp-nav-bg-color);
+  border-bottom: 1px solid var(--vp-c-divider);
+  transition: none;
+}
+
 .vp-navbar:not(.home) {
   background-color: var(--vp-nav-bg-color);
 }
@@ -240,6 +247,11 @@ watchPostEffect(() => {
   margin-right: -8px;
 }
 
+.divider {
+  width: 100%;
+  height: 1px;
+}
+
 @media (min-width: 960px) {
   .vp-navbar.has-sidebar .divider {
     padding-left: var(--vp-sidebar-width);
@@ -252,6 +264,10 @@ watchPostEffect(() => {
   }
 }
 
+.vp-navbar.screen-open .divider {
+  display: none;
+}
+
 .divider-line {
   width: 100%;
   height: 1px;

diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -48,8 +48,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   overflow-y: auto;
   pointer-events: auto;
   background-color: var(--vp-nav-screen-bg-color);
-  border-top: 1px solid var(--vp-c-divider);
-  transition: background-color var(--t-color), border-top var(--t-color);
+  transition: background-color var(--t-color);
 }
 
 .container {

diff --git a/theme/src/client/components/VPSwitchAppearance.vue b/theme/src/client/components/VPSwitchAppearance.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, watchPostEffect } from 'vue'
 import VPSwitch from '@theme/VPSwitch.vue'
 import { useData } from '../composables/data.js'
 
@@ -10,8 +10,9 @@ const toggleAppearance = inject('toggle-appearance', () => {
   isDark.value = !isDark.value
 })
 
-const switchTitle = computed(() => {
-  return isDark.value
+const switchTitle = ref('')
+watchPostEffect(() => {
+  switchTitle.value = isDark.value
     ? theme.value.lightModeSwitchTitle || 'Switch to light theme'
     : theme.value.darkModeSwitchTitle || 'Switch to dark theme'
 })