perf: 优化导航，弹出的菜单超出内容区自适应且可滚动 (#858)

src/layout/components/sidebar/horizontal.vue

@@ -51,6 +51,7 @@ nextTick(() => {
       ref="menuRef"
       router
       mode="horizontal"
+      popper-class="pure-scrollbar"
       class="horizontal-header-menu"
       :default-active="defaultActive"
     >

src/layout/components/sidebar/mixNav.vue

@@ -68,6 +68,7 @@ watch(
       ref="menuRef"
       router
       mode="horizontal"
+      popper-class="pure-scrollbar"
       class="horizontal-header-menu"
       :default-active="defaultActive"
     >

src/layout/components/sidebar/sidebarItem.vue

@@ -254,12 +254,12 @@ function resolvePath(routePath) {
       </div>
     </template>
   </el-menu-item>
-
   <el-sub-menu
     v-else
     ref="subMenu"
-    v-bind="expandCloseIcon"
+    teleported
     :index="resolvePath(props.item.path)"
+    v-bind="expandCloseIcon"
   >
     <template #title>
       <div
@@ -307,6 +307,7 @@ function resolvePath(routePath) {
         <extraIcon v-if="!isCollapse" :extraIcon="props.item.meta.extraIcon" />
       </div>
     </template>
+
     <sidebar-item
       v-for="child in props.item.children"
       :key="child.path"

src/layout/components/sidebar/vertical.vue

@@ -98,11 +98,12 @@ onBeforeUnmount(() => {
         router
         unique-opened
         mode="vertical"
-        :popper-effect="tooltipEffect"
+        popper-class="pure-scrollbar"
         class="outer-most select-none"
         :collapse="isCollapse"
-        :default-active="defaultActive"
         :collapse-transition="false"
+        :popper-effect="tooltipEffect"
+        :default-active="defaultActive"
       >
         <sidebar-item
           v-for="routes in menuData"