优化垂直导航布局和动态标签页的样式

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

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;

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;
-            }
           }
         }
       }

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" />