From 1f09e1ff93d587b6cbb0d1a21ac3500ef273fa2e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 21 May 2025 21:06:40 +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=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BF=AE=E5=A4=8D=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=E5=8D=8A=E5=BE=84=E8=AE=BE=E7=BD=AE=EF=BC=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=20TransitionExpand=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/scss/_vertical-nav.scss             |   5 -
 .../_default-layout-w-vertical-nav.scss       |   6 +-
 .../scss/template/placeholders/_misc.scss     |   1 -
 src/@layouts/components/TransitionExpand.vue  | 209 ------------------
 4 files changed, 3 insertions(+), 218 deletions(-)
 delete mode 100644 src/@layouts/components/TransitionExpand.vue

diff --git a/src/@core/scss/_vertical-nav.scss b/src/@core/scss/_vertical-nav.scss
index 51fdf37b..2a818f4c 100644
--- a/src/@core/scss/_vertical-nav.scss
+++ b/src/@core/scss/_vertical-nav.scss
@@ -118,11 +118,6 @@
         opacity: var(--v-disabled-opacity);
         pointer-events: none;
       }
-    }
-
-    // 👉 Vertical nav link
-    .nav-link {
-      @extend %nav-link;
 
       > .router-link-exact-active {
         @extend %nav-link-active;
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 dca58b3f..4a494e95 100644
--- a/src/@core/scss/template/_default-layout-w-vertical-nav.scss
+++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss
@@ -22,7 +22,7 @@ $header: ".layout-navbar";
     // 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;
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
       }
     }
 
@@ -31,7 +31,7 @@ $header: ".layout-navbar";
       /* ℹ️ This html selector with not selector is required when:
         dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
     */
-      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-fixed,
+      html.v-overlay-scroll-blocked .layout-navbar-fixed,
       &.window-scrolled.layout-navbar-fixed {
 
         #{$header} {
@@ -63,7 +63,7 @@ $header: ".layout-navbar";
 
     #{$header} {
       @if variables.$layout-vertical-nav-navbar-is-contained {
-        // border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
       }
 
       background-color: rgb(var(--v-theme-surface));
diff --git a/src/@core/scss/template/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss
index d3ab7e7c..8f294635 100644
--- a/src/@core/scss/template/placeholders/_misc.scss
+++ b/src/@core/scss/template/placeholders/_misc.scss
@@ -5,7 +5,6 @@
 
 
     .v-theme--light & {
-      border-radius: 0 0 16px 16px;
       backdrop-filter: blur(16px);
       background: rgba(var(--v-theme-surface), 0.9);
       box-shadow: 0 0 8px 0 rgba(var(--v-theme-on-surface), 0.1);
diff --git a/src/@layouts/components/TransitionExpand.vue b/src/@layouts/components/TransitionExpand.vue
deleted file mode 100644
index ef6d70b8..00000000
--- a/src/@layouts/components/TransitionExpand.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<script lang="ts">
-import { Transition } from 'vue'
-import { useDisplay } from 'vuetify'
-import VerticalNav from '@layouts/components/VerticalNav.vue'
-
-export default defineComponent({
-  setup(props, { slots }) {
-    const isOverlayNavActive = ref(false)
-    const isLayoutOverlayVisible = ref(false)
-    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
-
-    const route = useRoute()
-    const { mdAndDown } = useDisplay()
-
-    // ℹ️ This is alternative to below two commented watcher
-    // We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
-    syncRef(isOverlayNavActive, isLayoutOverlayVisible)
-
-    const scrollDistance = ref(window.scrollY)
-
-    onMounted(() => {
-      window.addEventListener('scroll', () => {
-        scrollDistance.value = window.scrollY
-      })
-    })
-
-    return () => {
-      // 👉 Vertical nav
-      const verticalNav = h(
-        VerticalNav,
-        { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
-        {
-          'nav-header': () => slots['vertical-nav-header']?.(),
-          'before-nav-items': () => slots['before-vertical-nav-items']?.(),
-          'default': () => slots['vertical-nav-content']?.(),
-          'after-nav-items': () => slots['after-vertical-nav-items']?.(),
-        },
-      )
-
-      // 👉 Navbar
-      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
-        h(
-          'div',
-          { class: 'navbar-content-container' },
-          slots.navbar?.({
-            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
-          }),
-        ),
-      ])
-
-      const main = h(
-        'main',
-        { class: 'layout-page-content' },
-        h(Transition, { name: 'fade-slide', mode: 'out-in', appear: true }, () =>
-          h('section', { class: 'page-content-container' }, slots.default?.()),
-        ),
-      )
-
-      // 👉 根据路由 meta 决定 footer 高度
-      const shouldShowFooter = !route.meta.hideFooter
-
-      // 👉 Footer
-      const footer = h('footer', { class: 'layout-footer' }, [
-        h(
-          'div',
-          {
-            class: ['footer-content-container', !shouldShowFooter && 'footer-content-container-noheight'],
-          },
-          slots.footer?.(),
-        ),
-      ])
-
-      // 👉 Overlay
-      const layoutOverlay = h('div', {
-        class: ['layout-overlay', 'touch-none', { visible: isLayoutOverlayVisible.value }],
-        onClick: () => {
-          isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value
-        },
-      })
-
-      return h(
-        'div',
-        {
-          class: [
-            'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
-            'layout-navbar-fixed',
-            mdAndDown.value && 'layout-overlay-nav',
-            route.meta.layoutWrapperClasses,
-            scrollDistance.value && 'window-scrolled',
-          ],
-        },
-        [verticalNav, h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]), layoutOverlay],
-      )
-    }
-  },
-})
-</script>
-
-<style lang="scss">
-@use '@configured-variables' as variables;
-@use '@layouts/styles/placeholders';
-@use '@layouts/styles/mixins';
-
-.layout-wrapper.layout-nav-type-vertical {
-  // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
-  block-size: 100%;
-
-  .layout-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    min-block-size: calc(var(--vh, 1vh) * 100);
-    transition: padding-inline-start 0.2s ease-in-out;
-    will-change: padding-inline-start;
-  }
-
-  .layout-navbar {
-    position: fixed;
-    width: calc(100vw - variables.$layout-vertical-nav-width - 1rem);
-    z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
-    inset-block-start: 0;
-
-    .navbar-content-container {
-      block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height);
-    }
-
-    @at-root {
-      .layout-wrapper.layout-nav-type-vertical {
-        .layout-navbar {
-          @if variables.$layout-vertical-nav-navbar-is-contained {
-            @include mixins.boxed-content;
-          } @else {
-            .navbar-content-container {
-              // @include mixins.boxed-content;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.layout-navbar-fixed .layout-navbar {
-    @extend %layout-navbar-fixed;
-  }
-
-  &.layout-navbar-hidden .layout-navbar {
-    @extend %layout-navbar-hidden;
-  }
-
-  // 👉 Footer
-  .layout-footer {
-    @include mixins.boxed-content;
-  }
-
-  // 👉 Layout overlay
-  .layout-overlay {
-    position: fixed;
-    z-index: variables.$layout-overlay-z-index;
-    background-color: rgb(0 0 0 / 60%);
-    cursor: pointer;
-    inset: 0;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.25s ease-in-out;
-    will-change: transform;
-
-    &.visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  &:not(.layout-overlay-nav) .layout-content-wrapper {
-    padding-inline-start: variables.$layout-vertical-nav-width;
-  }
-
-  // Adjust right column pl when vertical nav is collapsed
-  &.layout-vertical-nav-collapsed .layout-content-wrapper {
-    padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
-  }
-
-  // 👉 Content height fixed
-  &.layout-content-height-fixed {
-    .layout-content-wrapper {
-      max-block-size: calc(var(--vh) * 100);
-    }
-
-    .layout-page-content {
-      // display: flex;
-      overflow: hidden;
-
-      .page-content-container {
-        inline-size: 100%;
-
-        > :first-child {
-          max-block-size: 100%;
-          overflow-y: auto;
-        }
-      }
-    }
-  }
-}
-
-.layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
-  .layout-navbar {
-    width: 100%;
-  }
-}
-</style>