docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Navbar item support isActive attribute, hash link activation is invalid

Open drizzlesconsin opened this issue 3 years ago • 0 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [X] I have tried the npm run clear or yarn clear command.
  • [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • [X] I have tried creating a repro with https://new.docusaurus.io.
  • [X] I have read the console error message carefully (if applicable).

Description

In this scenario, activeBaseRegex alone will not achieve the desired effect.

Navbar configuration:

items: [
    { to: '/', position: 'left', label: 'home', exact: true, isActive: (_, {pathname, hash}) => `${pathname}${hash}` === '/' },
    { to: '/#a', position: 'left', label: 'aa', isActive: () => window.location.hash === '#a' },
    { to: '/#b', position: 'left', label: 'bb', isActive: () => window.location.hash === '#b' },
    { to: '/#c', position: 'left', label: 'cc', isActive: () => window.location.hash === '#c' },
    { to: '/#d', position: 'left', label: 'dd', isActive: () => window.location.hash === '#d'},
]

This configuration, in any case, does not meet expectations

{ to: '/', position: 'left', label: 'home', exact: true, },
{ to: '/#a', position: 'left', label: 'home#a', activeBaseRegex: '/#a' },
{ to: '/#b', position: 'left', label: 'home#b', activeBaseRegex: '/#b' },

I'm trying to fix this:https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx#L66-L68 It feels like only isActive can solve this ge.

return isRegexpStringMatch(
    activeBaseRegex,
    hash ? `${pathname}${hash}` : pathname,
  );

https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-common/src/utils/regexpUtils.ts#L16-L23

Reproducible demo

No response

Steps to reproduce

{ to: '/', position: 'left', label: 'home', exact: true, },
{ to: '/#a', position: 'left', label: 'home#a', activeBaseRegex: '/#a' },
{ to: '/#b', position: 'left', label: 'home#b', activeBaseRegex: '/#b' },

Expected behavior

Able to highlight menu items normally. image image image

Actual behavior

image

Your environment

  • Public source code:
  • Public site URL:
  • Docusaurus version used: ^3.0.0-alpha.0
  • Environment name and version (e.g. Chrome 89, Node.js 16.4):
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • [ ] I'd be willing to fix this bug myself.

drizzlesconsin avatar Aug 24 '22 21:08 drizzlesconsin