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

Loading…
Cancel
Save