From 46e7609f3a84d8087d776a7fbab5e58507dea863 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Mon, 23 May 2022 14:08:28 +0800
Subject: [PATCH] fix(theme): show blur according to sidebar status

---
 src/client/theme-default/components/VPNav.vue    |  9 ++++++++-
 src/client/theme-default/components/VPNavBar.vue | 11 ++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index a1698896..a7d6fa1c 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/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);
   }
 }
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<{
     <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,