diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue index a1698896..b6b72160 100644 --- a/src/client/theme-default/components/VPNav.vue +++ b/src/client/theme-default/components/VPNav.vue @@ -1,16 +1,20 @@ - + @@ -28,6 +32,11 @@ provide('close-screen', closeScreen) @media (min-width: 960px) { .VPNav { position: fixed; + } +} + +@media (min-width: 960px) { + .no-sidebar { backdrop-filter: saturate(50%) blur(8px); } } diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue index 6f91fc29..3b20000f 100644 --- a/src/client/theme-default/components/VPNavBar.vue +++ b/src/client/theme-default/components/VPNavBar.vue @@ -7,6 +7,9 @@ import VPNavBarAppearance from './VPNavBarAppearance.vue' import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue' import VPNavBarExtra from './VPNavBarExtra.vue' import VPNavBarHamburger from './VPNavBarHamburger.vue' +import { useSidebar } from '../composables/sidebar' + +const { hasSidebar } = useSidebar() defineProps<{ isScreenOpen: boolean @@ -22,7 +25,7 @@ defineEmits<{ - + @@ -76,6 +79,12 @@ defineEmits<{ flex-grow: 1; } +@media (min-width: 960px) { + .has-sidebar { + backdrop-filter: saturate(50%) blur(8px); + } +} + .menu + .translations::before, .menu + .appearance::before, .menu + .social-links::before,