From 4501a1654ec6b503ccbbd3e8526d9e43131affe7 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 16 Jul 2024 00:16:55 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/Nav/VPNavBar.vue   | 18 +++++++++++++++++-
 .../src/client/components/Nav/VPNavScreen.vue  |  3 +--
 .../client/components/VPSwitchAppearance.vue   |  7 ++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
index 63f079499..e7339ed7a 100644
--- 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
index a96d69338..088473e24 100644
--- 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
index 9454d673b..7b13690b0 100644
--- 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'
 })