refactor: sidebar link

docs/.vuepress/theme/components/SidebarLink.vue

@@ -1,57 +1,7 @@
 <script>
-import { isActive, hashRE, groupHeaders } from '@parent-theme/util'
-export default {
-  functional: true,
-  props: ['item', 'sidebarDepth'],
-  render (h,
-    {
-      parent: {
-        $page,
-        $site,
-        $route,
-        $themeConfig,
-        $themeLocaleConfig
-      },
-      props: {
-        item,
-        sidebarDepth
-      }
-    }) {
-    // use custom active class matching logic
-    // due to edge case of paths ending with / + hash
-    const selfActive = isActive($route, item.path)
-    // for sidebar: auto pages, a hash link should be active if one of its child
-    // matches
-    const active = item.type === 'auto'
-      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
-      : selfActive
-    const link = item.type === 'external'
-      ? renderExternal(h, item.path, item.title || item.path)
-      : renderLink(h, item.path, item.title || item.path, active)
-    const maxDepth = [
-      $page.frontmatter.sidebarDepth,
-      sidebarDepth,
-      $themeLocaleConfig.sidebarDepth,
-      $themeConfig.sidebarDepth,
-      1
-    ].find(depth => depth !== undefined)
-    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
-      || $themeConfig.displayAllHeaders
+import { isActive, emit } from '@parent-theme/util'
 
-    return link
-    // if (item.type === 'auto') {
-    //   console.log('1', item.children)
-    //   return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
-    // } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
-    //   const children = groupHeaders(item.headers)
-    //   console.log('2', children)
-    //   return [link, renderChildren(h, children, item.path, $route, maxDepth)]
-    // } else {
-    //   return link
-    // }
-  }
-}
-function renderLink (h, to, text, active, level) {
+function renderLink(h, to, text, active, layoutInstance) {
   const component = {
     props: {
       to,
@@ -61,40 +11,70 @@ function renderLink (h, to, text, active, level) {
     class: {
       active,
       'sidebar-link': true
-    }
-  }
-  if (level > 2) {
-    component.style = {
-      'padding-left': level + 'rem'
+    },
+    nativeOn: {
+      click() {
+        // 点击后关闭菜单
+        layoutInstance?.toggleSidebar(false)
+      }
     }
   }
   return h('RouterLink', component, text)
 }
-function renderChildren (h, children, path, route, maxDepth, depth = 1) {
-  if (!children || depth > maxDepth) return null
-  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
-    const active = isActive(route, path + '#' + c.slug)
-    return h('li', { class: 'sidebar-sub-header' }, [
-      renderLink(h, path + '#' + c.slug, c.title, active, c.level - 1),
-      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
-    ])
-  }))
-}
-function renderExternal (h, to, text) {
-  return h('a', {
-    attrs: {
-      href: to,
-      target: '_blank',
-      rel: 'noopener noreferrer'
+
+function renderExternal(h, to, text) {
+  return h(
+    'a',
+    {
+      attrs: {
+        href: to,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      },
+      class: {
+        'sidebar-link': true,
+      },
     },
-    class: {
-      'sidebar-link': true
+    [text, h('OutboundLink')]
+  )
+}
+
+export default {
+  functional: true,
+  props: ['item', 'sidebarDepth'],
+  render(h, {
+      parent: { $route, $parent },
+      props: { item },
+    }) {
+    let parent = $parent
+    let layoutInstance = null
+
+    while (parent) {
+      if (parent.$vnode?.componentOptions.Ctor.options.name === 'Layout') {
+        layoutInstance = parent
+        break
+      }
+      parent = parent.$parent
     }
-  }, [text, h('OutboundLink')])
+
+    const selfActive = isActive($route, item.path)
+    const active =
+      item.type === 'auto'
+        ? selfActive ||
+          item.children.some((c) =>
+            isActive($route, item.basePath + '#' + c.slug)
+          )
+        : selfActive
+    const link = item.type === 'external'
+        ? renderExternal(h, item.path, item.title || item.path)
+        : renderLink(h, item.path, item.title || item.path, active, layoutInstance)
+
+    return link
+  },
 }
 </script>
 
-<style lang="stylus">
+<style lang='stylus'>
 .sidebar .sidebar-sub-headers
   padding-left 1rem
   font-size 0.95em
@@ -122,4 +102,4 @@ a.sidebar-link
     border-left none
     &.active
       font-weight 500
-</style>
+</style>