rollback menu layout

src/@layouts/components/TransitionExpand.vue

@@ -1,92 +1,209 @@
-<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
-
 <script lang="ts">
 import { Transition } from 'vue'
+import { useDisplay } from 'vuetify'
+import VerticalNav from '@layouts/components/VerticalNav.vue'
 
 export default defineComponent({
-  name: 'TransitionExpand',
-  setup(_, { slots }) {
-    const onEnter = (element: HTMLElement) => {
-      const width = getComputedStyle(element).width
+  setup(props, { slots }) {
+    const isOverlayNavActive = ref(false)
+    const isLayoutOverlayVisible = ref(false)
+    const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
 
-      element.style.width = width
-      element.style.position = 'absolute'
-      element.style.visibility = 'hidden'
-      element.style.height = 'auto'
+    const route = useRoute()
+    const { mdAndDown } = useDisplay()
 
-      const height = getComputedStyle(element).height
+    // ℹ️ 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)
 
-      element.style.width = ''
-      element.style.position = ''
-      element.style.visibility = ''
-      element.style.height = '0px'
+    const scrollDistance = ref(window.scrollY)
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height
-
-      // Trigger the animation.
-      // We use `requestAnimationFrame` because we need
-      // to make sure the browser has finished
-      // painting after setting the `height`
-      // to `0` in the line above.
-      requestAnimationFrame(() => {
-        element.style.height = height
+    onMounted(() => {
+      window.addEventListener('scroll', () => {
+        scrollDistance.value = window.scrollY
       })
-    }
+    })
 
-    const onAfterEnter = (element: HTMLElement) => {
-      element.style.height = 'auto'
-    }
+    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']?.(),
+        },
+      )
 
-    const onLeave = (element: HTMLElement) => {
-      const height = getComputedStyle(element).height
+      // 👉 Navbar
+      const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
+        h(
+          'div',
+          { class: 'navbar-content-container' },
+          slots.navbar?.({
+            toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
+          }),
+        ),
+      ])
 
-      element.style.height = height
+      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?.()),
+        ),
+      )
 
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height
+      // 👉 根据路由 meta 决定 footer 高度
+      const shouldShowFooter = !route.meta.hideFooter
 
-      requestAnimationFrame(() => {
-        element.style.height = '0px'
+      // 👉 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(
-      h(Transition),
-      {
-        name: 'expand',
-        onEnter,
-        onAfterEnter,
-        onLeave,
-      },
-      () => slots.default?.(),
-    )
+      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>
-.expand-enter-active,
-.expand-leave-active {
-  overflow: hidden;
-  transition: block-size var(--expand-transition-duration, 0.25s) ease;
+<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 - 0.5rem);
+    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;
+        }
+      }
+    }
+  }
 }
 
-.expand-enter-from,
-.expand-leave-to {
-  block-size: 0;
-}
-</style>
-
-<style scoped>
-* {
-  backface-visibility: hidden;
-  perspective: 62.5rem;
-  transform: translateZ(0);
-  will-change: block-size;
+.layout-wrapper.layout-nav-type-vertical.layout-overlay-nav {
+  .layout-navbar {
+    width: 100%;
+  }
 }
 </style>

src/@layouts/components/VerticalNav.vue

@@ -117,23 +117,13 @@ function handleNavScroll(evt: Event) {
   }
 
   .nav-items {
-    overflow-x: hidden;
-    overflow-y: auto;
     block-size: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 0 0 16px 0;
-    
-    /* 完全隐藏滚动条 */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
-    
-    > li {
-      margin-block-end: 2px;
-    }
+
+    // ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
+    // overflow-x: hidden;
+
+    // // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
+    // overflow-y: auto;
   }
 
   .nav-item-title {
@@ -161,4 +151,4 @@ function handleNavScroll(evt: Event) {
     }
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavLink.vue

@@ -1,29 +1,16 @@
 <script lang="ts" setup>
 import type { NavLink } from '@layouts/types'
 
-// 定义类型必须使用vuetify中正确导出的类型
-const props = defineProps<{
+defineProps<{
   item: NavLink
 }>()
 </script>
 
 <template>
-  <li
-    class="nav-link"
-    :class="{ disabled: item.disable }"
-  >
-    <Component
-      :is="item.to ? 'RouterLink' : 'a'"
-      :to="item.to"
-      :href="item.href"
-      class="link-wrapper"
-    >
-      <VIcon
-        v-if="item.icon != null"
-        :icon="item.icon?.toString()"
-        size="20"
-        class="nav-item-icon"
-      />
+  <li class="nav-link" :class="{ disabled: item.disable }">
+    <Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href">
+      <VIcon :icon="item.icon" class="nav-item-icon" />
+      <!-- 👉 Title -->
       <span class="nav-item-title">
         {{ item.title }}
       </span>
@@ -33,54 +20,13 @@ const props = defineProps<{
 
 <style lang="scss">
 .layout-vertical-nav {
-  .nav-link {
-    margin: 1px 16px;
-    position: relative;
-    
-    &.disabled {
-      opacity: 0.6;
-      pointer-events: none;
-    }
-    
-    .router-link-active {
-      background-color: rgb(var(--v-theme-primary));
-      position: relative;
-      border-radius: 6px;
-      
-      .nav-item-icon,
-      .nav-item-title {
-        color: white;
-      }
-    }
-    
-    a, .link-wrapper {
-      display: flex;
-      align-items: center;
-      border-radius: 6px;
-      cursor: pointer;
-      padding: 8px 10px;
-      transition: background-color 0.2s ease;
-      position: relative;
-      
-      &:hover:not(.router-link-active) {
-        background-color: rgba(var(--v-theme-on-surface), 0.05);
-      }
-    }
-  }
-  
-  .nav-item-icon {
-    color: rgba(var(--v-theme-on-surface), 0.75);
-    margin-right: 8px;
-    min-width: 20px;
-  }
-  
-  .nav-item-title {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: rgba(var(--v-theme-on-surface), 0.85);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .nav-link a {
+    display: flex;
+    align-items: center;
+    border-radius: 0 3.125rem 3.125rem 0 !important;
+    cursor: pointer;
+    margin-inline-end: 1.125em;
+    padding-inline: 1.375rem 1rem;
   }
 }
-</style>
+</style>

src/@layouts/components/VerticalNavSectionTitle.vue

@@ -8,22 +8,19 @@ defineProps<{
 
 <template>
   <li class="nav-section-title">
-    <div class="title-text">{{ item.heading }}</div>
+    <div class="title-wrapper">
+      <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+      <span class="title-text" v-text="item.heading" />
+      <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+    </div>
   </li>
 </template>
 
 <style lang="scss">
 .layout-vertical-nav {
   .nav-section-title {
-    margin: 16px 16px 6px 16px;
-    position: relative;
-    
-    .title-text {
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: rgb(var(--v-theme-primary));
-      padding-left: 0;
-    }
+    padding-left: 1.375rem;
+    padding-right: 1rem;
   }
 }
 </style>