From 61c9b97d70f4466de6329a39c17d24236b6903ef Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 6 Jul 2025 00:41:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9E=82=E7=9B=B4=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E5=B8=83=E5=B1=80=E5=92=8C=E5=8A=A8=E6=80=81=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_default-layout-w-vertical-nav.scss       |  8 +++----
 .../scss/template/placeholders/_misc.scss     | 13 +++++++---
 src/@layouts/components/VerticalNavLayout.vue | 24 +++++++++----------
 src/layouts/components/DefaultLayout.vue      |  4 ++--
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/@core/scss/template/_default-layout-w-vertical-nav.scss b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
index 4a494e95..3ad6ed5a 100644
--- a/src/@core/scss/template/_default-layout-w-vertical-nav.scss
+++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
@@ -16,14 +16,14 @@ $header: ".layout-navbar";
   @if variables.$vertical-nav-navbar-style == "elevated" {
     // Add transition
     #{$header} {
-      transition: padding 0.2s ease, background-color 0.18s ease;
+      transition: padding 0.2s ease;
     }
 
     // If navbar is contained => Add border radius to header
     @if variables.$layout-vertical-nav-navbar-is-contained {
-      #{$header} {
-        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
-      }
+      // #{$header} {
+        // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      // }
     }
 
     // Scrolled styles for sticky navbar
diff --git a/src/@core/scss/template/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss
index c37384e9..7851f401 100644
--- a/src/@core/scss/template/placeholders/_misc.scss
+++ b/src/@core/scss/template/placeholders/_misc.scss
@@ -1,6 +1,14 @@
 %blurry-bg {
     position: relative;
-    box-shadow: none;
+    background: rgba(var(--v-theme-background), 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
+
+    @media (width > 768px) {
+      .v-theme--transparent & {
+        backdrop-filter: blur(5px);
+        background: rgba(var(--v-theme-background), 0.1);
+      }
+    }
 
 
     @media (width <= 768px) {
@@ -10,8 +18,7 @@
         position: absolute;
         z-index: -1;
         backdrop-filter: blur(24px);
-        block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4.5rem);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
+        block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
         content: "";
         inset-block-start: 0;
         inset-inline: 0;
diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue
index 602cb5fd..a4f552fd 100644
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -45,14 +45,16 @@ export default defineComponent({
           h(
             'div',
             { class: 'navbar-content-container' },
-            slots.navbar?.({
-              toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
-            }),
+            [
+              slots.navbar?.({
+                toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+              }),
+              // 👉 Dynamic Header Tab in NavBar
+              slots['dynamic-header-tab']?.()
+                ? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
+                : null,
+            ].filter(Boolean),
           ),
-          // 👉 Dynamic Header Tab in NavBar
-          slots['dynamic-header-tab']?.()
-            ? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
-            : null,
         ].filter(Boolean),
       )
 
@@ -135,7 +137,9 @@ export default defineComponent({
     inset-block-start: 0;
 
     .navbar-content-container {
-      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
+      block-size: calc(
+        env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + var(--navbar-tab-height)
+      );
     }
 
     @at-root {
@@ -143,10 +147,6 @@ export default defineComponent({
         .layout-navbar {
           @if variables.$layout-vertical-nav-navbar-is-contained {
             @include mixins.boxed-content;
-          } @else {
-            .navbar-content-container {
-              // @include mixins.boxed-content;
-            }
           }
         }
       }
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index cd080ae0..8c42f4e0 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -287,10 +287,10 @@ onMounted(() => {
       />
     </div>
   </div>
-  <VerticalNavLayout :style="{ '--navbar-height': showDynamicHeaderTab ? '2.5rem' : '0px' }">
+  <VerticalNavLayout :style="{ '--navbar-tab-height': showDynamicHeaderTab ? '2.5rem' : '0px' }">
     <!-- 👉 Navbar -->
     <template #navbar="{ toggleVerticalOverlayNavActive }">
-      <div class="d-flex h-100 align-center mx-1">
+      <div class="d-flex h-14 align-center mx-1">
         <!-- 👉 Vertical Nav Toggle -->
         <IconBtn v-if="!appMode && display.mdAndDown.value" class="ms-n2" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />