From daafd2f0cc0c7ba77ecdceaf2803bb238ecebc13 Mon Sep 17 00:00:00 2001 From: Ben Gubler Date: Sun, 17 May 2020 05:23:32 -0600 Subject: [PATCH] feat(v2): allow activeBaseTest in NavLink (#2690) * Update documentation, add support for activeBaseTest * Implicit else * Fix Regular Expression capitalization Co-Authored-By: Alexey Pyltsyn * Refactor isActive to ternary function, rename activeBaseTest to activeBaseRegex * Update website/docs/theme-classic.md Co-Authored-By: Alexey Pyltsyn * Fix typo * Update website/docs/theme-classic.md Co-Authored-By: Alexey Pyltsyn * Update theme-classic.md Co-authored-by: Alexey Pyltsyn --- .../docusaurus-theme-classic/src/theme/Navbar/index.js | 7 +++++-- website/docs/theme-classic.md | 5 +++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js index a9dc767aeb..f1d0fcb4ef 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js @@ -22,6 +22,7 @@ import styles from './styles.module.css'; function NavLink({ activeBasePath, + activeBaseRegex, to, href, label, @@ -45,10 +46,12 @@ function NavLink({ isNavLink: true, activeClassName, to: toUrl, - ...(activeBasePath + ...(activeBasePath || activeBaseRegex ? { isActive: (_match, location) => - location.pathname.startsWith(activeBaseUrl), + activeBaseRegex + ? new RegExp(activeBaseRegex).test(location.pathname) + : location.pathname.startsWith(activeBaseUrl), } : null), })} diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md index 3881e79989..547d1ab11a 100644 --- a/website/docs/theme-classic.md +++ b/website/docs/theme-classic.md @@ -146,7 +146,10 @@ module.exports = { position: 'left', // or 'right' // To apply the active class styling on all // routes starting with this path. + // This usually isn't necessary activeBasePath: 'docs', + // Alternative to activeBasePath if required. + activeBaseRegex: 'docs/(next|v8)', // Custom CSS class (for styling any item). 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. ### Navbar Dropdown