rollback menu layout

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>