vitepress
vitepress copied to clipboard
fix(theme): fix ineffective activeMatch configuration
In the settings of the default theme's Navbar, we can set the activeMatch
for Navbar items with children. However, when the regular expression does not match and one of the links in the children matches the current page, it will be highlighted incorrectly.
This is the definition of NavItemWithChildren in the default theme:
export interface NavItemWithChildren {
text?: string
items: (NavItemChildren | NavItemWithLink)[]
/**
* `activeMatch` is expected to be a regex string. We can't use actual
* RegExp object here because it isn't serializable
*/
activeMatch?: string
}
@brc-dd , could you please review the following PR? This PR fixes a bug where the theme navbar configuration does not respect the NavItem's activeMatch. I'll illustrate through a real-life example.
Let's say I have a dropdown list for versioning - I wanted to highlight only the specific version number and not the "Versions" tab. So I set an activeMatch that wouldn't practically be matched, but to no avail - "Versions" was still highlighted. I perceive this as a bug; The correct logic should foremost respect the parent menu's activeMatch.
const nav = {
text: 'Versions',
activeMatch: `^/no-active/`,
items: [
{ text: 'v1.0', link: '/docs/v1' },
{ text: 'v2.0', link: '/docs/v2' },
{ text: 'v3.0', link: '/docs/v3' },
]
}