fix(theme): header blur is incomplete (#639)

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

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

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { provide } from 'vue'
+import { useSidebar } from '../composables/sidebar'
 import { useNav } from '../composables/nav'
+import { useSidebar } from '../composables/sidebar'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { hasSidebar } = useSidebar()
 
 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>
@@ -29,5 +32,9 @@ provide('close-screen', closeScreen)
   .VPNav {
     position: fixed;
   }
+
+  .VPNav.no-sidebar {
+    backdrop-filter: saturate(50%) blur(8px);
+  }
 }
 </style>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useSidebar } from '../composables/sidebar'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarSearch from './VPNavBarSearch.vue'
 import VPNavBarMenu from './VPNavBarMenu.vue'
@@ -8,6 +9,8 @@ import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
 
+const { hasSidebar } = useSidebar()
+
 defineProps<{
   isScreenOpen: boolean
 }>()
@@ -18,7 +21,7 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="VPNavBar">
+  <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
     <div class="container">
       <VPNavBarTitle />
 
@@ -60,6 +63,10 @@ defineEmits<{
     height: var(--vp-nav-height-desktop);
     border-bottom: 0;
   }
+
+  .VPNavBar.has-sidebar .content {
+    backdrop-filter: saturate(50%) blur(8px);
+  }
 }
 
 .container {
@@ -76,12 +83,6 @@ defineEmits<{
   flex-grow: 1;
 }
 
-@media (min-width: 960px) {
-  .content {
-    backdrop-filter: saturate(50%) blur(8px);
-  }
-}
-
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,