fix: menu link don't show active status

pull/680/head
Percy Ma 3 years ago
parent 7131a07b06
commit 9dcbb214dd
No known key found for this signature in database
GPG Key ID: A1803D3315E6CCBC

@ -1,5 +1,8 @@
<script lang="ts" setup>
import { useData } from 'vitepress'
import VPLink from './VPLink.vue'
import { isActive } from '../support/utils'
const { page } = useData()
defineProps<{
item: any
@ -7,7 +10,13 @@ defineProps<{
</script>
<template>
<VPLink class="VPMenuLink" :href="item.link">
<VPLink
:class="{
VPMenuLink: true,
active: isActive(page.relativePath, item.activeMatch || item.link)
}"
:href="item.link"
>
{{ item.text }}
</VPLink>
</template>
@ -25,6 +34,10 @@ defineProps<{
transition: background-color 0.25s, color 0.25s;
}
.VPMenuLink.active {
color: var(--vp-c-brand);
}
.VPMenuLink:hover {
color: var(--vp-c-brand);
background-color: var(--vp-c-bg-mute);

Loading…
Cancel
Save