feat: 导航栏子元素高亮时父元素高亮

This commit is contained in:
pengzhanbo 2023-12-23 01:53:33 +08:00
parent 387dff9a60
commit 1b7d3dae33

View File

@ -1,21 +1,35 @@
<script lang="ts" setup>
import { usePageData } from '@vuepress/client'
import type { NavItemWithChildren } from '../../../shared/index.js'
import { computed } from 'vue'
import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
import { isActive } from '../../utils/index.js'
import Flyout from '../Flyout/index.vue'
defineProps<{
const props = defineProps<{
item: NavItemWithChildren
}>()
const page = usePageData()
const isChildActive = (navItem: NavItem) => {
if ('link' in navItem) {
return isActive(
page.value.path,
navItem.link,
!!props.item.activeMatch
)
} else {
return navItem.items.some(isChildActive)
}
}
const childrenActive = computed(() => isChildActive(props.item))
</script>
<template>
<Flyout
:class="{
'navbar-menu-group': true,
'active': isActive(page.path, item.activeMatch, !!item.activeMatch),
'active': isActive(page.path, item.activeMatch, !!item.activeMatch) || childrenActive,
}"
:button="item.text"
:items="item.items"