|
|
|
@ -1,11 +1,12 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import type { DefaultTheme } from 'vitepress/theme'
|
|
|
|
|
import { computed, inject } from 'vue'
|
|
|
|
|
import { Ref, computed, inject, ref, watchEffect } from 'vue'
|
|
|
|
|
import { useData } from 'vitepress'
|
|
|
|
|
import { useSidebar } from '../composables/sidebar.js'
|
|
|
|
|
import { isActive } from '../support/utils.js'
|
|
|
|
|
import VPLink from './VPLink.vue'
|
|
|
|
|
|
|
|
|
|
withDefaults(
|
|
|
|
|
const props = withDefaults(
|
|
|
|
|
defineProps<{ item: DefaultTheme.SidebarItem; depth?: number }>(),
|
|
|
|
|
{ depth: 1 }
|
|
|
|
|
)
|
|
|
|
@ -14,16 +15,32 @@ const { page, frontmatter } = useData()
|
|
|
|
|
const maxDepth = computed<number>(
|
|
|
|
|
() => frontmatter.value.sidebarDepth || Infinity
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const active = computed(() =>
|
|
|
|
|
isActive(page.value.relativePath, props.item.link)
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const { isSidebarEnabled } = useSidebar()
|
|
|
|
|
const closeSideBar = inject('close-sidebar') as () => void
|
|
|
|
|
const isSidebarOpen = inject('is-sidebar-open') as Ref<boolean>
|
|
|
|
|
|
|
|
|
|
const link = ref<InstanceType<typeof VPLink> | null>(null)
|
|
|
|
|
watchEffect(() => {
|
|
|
|
|
if (isSidebarOpen.value && active.value) {
|
|
|
|
|
link.value?.$el?.focus()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<VPLink
|
|
|
|
|
class="link"
|
|
|
|
|
:class="{ active: isActive(page.relativePath, item.link) }"
|
|
|
|
|
:class="{ active }"
|
|
|
|
|
:style="{ paddingLeft: 16 * (depth - 1) + 'px' }"
|
|
|
|
|
:href="item.link"
|
|
|
|
|
:tabindex="isSidebarEnabled || isSidebarOpen ? 0 : -1"
|
|
|
|
|
@click="closeSideBar"
|
|
|
|
|
ref="link"
|
|
|
|
|
>
|
|
|
|
|
<span v-html="item.text" class="link-text" :class="{ light: depth > 1 }"></span>
|
|
|
|
|
</VPLink>
|
|
|
|
|