vitepress icon indicating copy to clipboard operation
vitepress copied to clipboard

fix(theme): fix ineffective activeMatch configuration

Open Red-Asuka opened this issue 1 year ago • 1 comments

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
  }

Red-Asuka avatar Dec 18 '23 08:12 Red-Asuka

@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' },
  ]
}
image

Red-Asuka avatar Apr 03 '24 02:04 Red-Asuka