3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-06 05:37:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): allow activeBaseTest in NavLink (#2690)

Browse source 
* Update documentation, add support for activeBaseTest

* Implicit else

* Fix Regular Expression capitalization

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

* Refactor isActive to ternary function, rename activeBaseTest to activeBaseRegex

* Update website/docs/theme-classic.md

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

* Fix typo

* Update website/docs/theme-classic.md

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

* Update theme-classic.md

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
This commit is contained in:
Ben Gubler 2020-05-17 05:23:32 -06:00 • committed by GitHub
parent 063484a05a
commit daafd2f0cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -22,6 +22,7 @@ import styles from './styles.module.css';
function NavLink({ function NavLink({
activeBasePath, activeBasePath,
activeBaseRegex,
to, to,
href, href,
label, label,
@ -45,10 +46,12 @@ function NavLink({
isNavLink: true, isNavLink: true,
activeClassName, activeClassName,
to: toUrl, to: toUrl,
...(activeBasePath ...(activeBasePath || activeBaseRegex
? { ? {
isActive: (_match, location) => isActive: (_match, location) =>
location.pathname.startsWith(activeBaseUrl), activeBaseRegex
? new RegExp(activeBaseRegex).test(location.pathname)
: location.pathname.startsWith(activeBaseUrl),
} }
: null), : null),
})} })}

5
website/docs/theme-classic.md
View file

@ -146,7 +146,10 @@ module.exports = {
position: 'left', // or 'right' position: 'left', // or 'right'
// To apply the active class styling on all // To apply the active class styling on all
// routes starting with this path. // routes starting with this path.
// This usually isn't necessary
activeBasePath: 'docs', activeBasePath: 'docs',
// Alternative to activeBasePath if required.
activeBaseRegex: 'docs/(next|v8)',
// Custom CSS class (for styling any item). // Custom CSS class (for styling any item).
className: '', className: '',
}, },
@ -158,6 +161,8 @@ module.exports = {
}; };
``` ```
React Router should automatically apply active link styling to links, but you can use `activeBasePath` in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use `activeBaseRegex`. `activeBaseRegex` is a more flexible alternative to `activeBasePath` and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL.
Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes. Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
### Navbar Dropdown ### Navbar Dropdown