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

* Update documentation, add support for activeBaseTest * Implicit else * Fix Regular Expression capitalization Co-Authored-By: Alexey Pyltsyn <[email protected]> * Refactor isActive to ternary function, rename activeBaseTest to activeBaseRegex * Update website/docs/theme-classic.md Co-Authored-By: Alexey Pyltsyn <[email protected]> * Fix typo * Update website/docs/theme-classic.md Co-Authored-By: Alexey Pyltsyn <[email protected]> * Update theme-classic.md Co-authored-by: Alexey Pyltsyn <[email protected]>
facebook · May 17, 2020 · daafd2f · daafd2f
1 parent 063484a
commit daafd2f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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