gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pengzhanbo 2024-07-16 00:16:55 +08:00
parent fc23e4950b
commit 4501a1654e
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
theme/src/client/components/Nav/VPNavBar.vue
View File

@ -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;

3
theme/src/client/components/Nav/VPNavScreen.vue
View File

@ -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 {

7
theme/src/client/components/VPSwitchAppearance.vue
View File

@ -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'
})