fix(theme): show blur according to sidebar status

pull/639/head
Percy Ma 3 years ago
parent de9f21446b
commit a369973f9b
No known key found for this signature in database
GPG Key ID: A1803D3315E6CCBC

@ -1,16 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { provide } from 'vue' import { provide } from 'vue'
import { useData } from 'vitepress'
import { useNav } from '../composables/nav' import { useNav } from '../composables/nav'
import VPNavBar from './VPNavBar.vue' import VPNavBar from './VPNavBar.vue'
import VPNavScreen from './VPNavScreen.vue' import VPNavScreen from './VPNavScreen.vue'
import { useSidebar } from '../composables/sidebar'
const { frontmatter } = useData()
const { hasSidebar } = useSidebar()
const { isScreenOpen, closeScreen, toggleScreen } = useNav() const { isScreenOpen, closeScreen, toggleScreen } = useNav()
provide('close-screen', closeScreen) provide('close-screen', closeScreen)
</script> </script>
<template> <template>
<header class="VPNav"> <header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }">
<VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" /> <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
<VPNavScreen :open="isScreenOpen" /> <VPNavScreen :open="isScreenOpen" />
</header> </header>
@ -28,6 +32,11 @@ provide('close-screen', closeScreen)
@media (min-width: 960px) { @media (min-width: 960px) {
.VPNav { .VPNav {
position: fixed; position: fixed;
}
}
@media (min-width: 960px) {
.no-sidebar {
backdrop-filter: saturate(50%) blur(8px); backdrop-filter: saturate(50%) blur(8px);
} }
} }

@ -7,6 +7,9 @@ import VPNavBarAppearance from './VPNavBarAppearance.vue'
import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue' import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
import VPNavBarExtra from './VPNavBarExtra.vue' import VPNavBarExtra from './VPNavBarExtra.vue'
import VPNavBarHamburger from './VPNavBarHamburger.vue' import VPNavBarHamburger from './VPNavBarHamburger.vue'
import { useSidebar } from '../composables/sidebar'
const { hasSidebar } = useSidebar()
defineProps<{ defineProps<{
isScreenOpen: boolean isScreenOpen: boolean
@ -22,7 +25,7 @@ defineEmits<{
<div class="container"> <div class="container">
<VPNavBarTitle /> <VPNavBarTitle />
<div class="content"> <div class="content" :class="{ 'has-sidebar' : hasSidebar }">
<VPNavBarSearch class="search" /> <VPNavBarSearch class="search" />
<VPNavBarMenu class="menu" /> <VPNavBarMenu class="menu" />
<VPNavBarTranslations class="translations" /> <VPNavBarTranslations class="translations" />
@ -76,6 +79,12 @@ defineEmits<{
flex-grow: 1; flex-grow: 1;
} }
@media (min-width: 960px) {
.has-sidebar {
backdrop-filter: saturate(50%) blur(8px);
}
}
.menu + .translations::before, .menu + .translations::before,
.menu + .appearance::before, .menu + .appearance::before,
.menu + .social-links::before, .menu + .social-links::before,

Loading…
Cancel
Save