feat: allow activeBaseRegex for DocNavbarItem

Author: juliusmarminge

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx

@@ -7,18 +7,25 @@
 
 import React from 'react';
 import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
-import {useLayoutDoc} from '@docusaurus/theme-common/internal';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {
+  isRegexpStringMatch,
+  useLayoutDoc,
+} from '@docusaurus/theme-common/internal';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 
 export default function DocNavbarItem({
   docId,
   label: staticLabel,
   docsPluginId,
+  activeBasePath,
+  activeBaseRegex,
   ...props
 }: Props): JSX.Element | null {
   const {activeDoc} = useActiveDocContext(docsPluginId);
   const doc = useLayoutDoc(docId, docsPluginId);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
 
   // Draft items are not displayed in the navbar.
   if (doc === null) {
@@ -29,10 +36,25 @@ export default function DocNavbarItem({
     <DefaultNavbarItem
       exact
       {...props}
-      isActive={() =>
-        activeDoc?.path === doc.path ||
-        (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
-      }
+      isActive={(_match, location) => {
+        if (activeBaseRegex) {
+          console.log('using activeBaseRegex', activeBaseRegex);
+          console.log('location', location.pathname);
+          const matched = isRegexpStringMatch(
+            activeBaseRegex,
+            location.pathname,
+          );
+          console.log('matched', matched);
+          return matched;
+        }
+        if (activeBasePath) {
+          return location.pathname.startsWith(activeBaseUrl);
+        }
+        return (
+          activeDoc?.path === doc.path ||
+          (!!activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar)
+        );
+      }}
       label={staticLabel ?? doc.id}
       to={doc.path}
     />

website/docusaurus.config.js

@@ -430,6 +430,13 @@ const config = {
             docId: 'introduction',
             label: 'Docs',
           },
+          {
+            type: 'doc',
+            position: 'left',
+            docId: 'playground',
+            label: 'Playground',
+            activeBaseRegex: `/docs/playground`,
+          },
           {
             type: 'docSidebar',
             position: 'left',