fix menu layout

src/@layouts/components/VerticalNav.vue

@@ -17,7 +17,6 @@ const props = withDefaults(defineProps<Props>(), {
 const { mdAndDown } = useDisplay()
 const refNav = ref()
 const route = useRoute()
-const menuShow = ref(false)
 
 watch(
   () => route.path,
@@ -43,26 +42,21 @@ function checkScreenSize() {
   isLargeScreen.value = screenWidth >= 1024
 }
 
-// 在组件挂载时执行检查
+// 在组件挂载时和窗口大小变化时执行检查
 onMounted(() => {
   checkScreenSize()
-  if (!isLargeScreen.value) {
-    // 1秒后显示菜单
-    setTimeout(() => {
-      menuShow.value = true
-    }, 1000)
-  }
-  else {
-    // 立即显示菜单
-    menuShow.value = true
-  }
+  window.addEventListener('resize', checkScreenSize)
+})
+
+// 在组件销毁前移除窗口大小变化监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkScreenSize)
 })
 </script>
 
 <template>
   <Component
     :is="props.tag"
-    v-show="menuShow"
     ref="refNav"
     class="layout-vertical-nav touch-none"
     :class="[
@@ -92,15 +86,17 @@ onMounted(() => {
     </slot>
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
+        v-if="isLargeScreen"
         tag="ul"
-        class="d-none d-lg-block nav-items"
+        class="nav-items"
         :options="{ wheelPropagation: false }"
         @ps-scroll-y="handleNavScroll"
       >
         <slot />
       </PerfectScrollbar>
       <ul
-        class="d-lg-none overflow-auto nav-items"
+        v-if="!isLargeScreen"
+        class="nav-items"
       >
         <slot />
       </ul>

src/styles/styles.scss

@@ -40,6 +40,22 @@
   width: 100%;
 }
 
+/* router view transition fade-slide */
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.6s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-45px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(45px);
+}
+
 .grid-info-card {
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   padding-block-end: 1rem;
@@ -90,8 +106,10 @@
   border-radius: 3px;
   background: rgb(var(--v-theme-perfect-scrollbar-thumb));
   -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
-  &:hover{
-    background: #a1a1a1;
+  @media(hover){
+    &:hover{
+      background: #a1a1a1;
+    }
   }
 }