fix(theme): show blur according to sidebar status

src/client/theme-default/components/VPNav.vue

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

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<{
     <div class="container">
       <VPNavBarTitle />
 
-      <div class="content">
+      <div class="content" :class="{ 'has-sidebar' : hasSidebar }">
         <VPNavBarSearch class="search" />
         <VPNavBarMenu class="menu" />
         <VPNavBarTranslations class="translations" />
@@ -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,