fix: unbreak highlighting regular navbar links

facebook · Aug 8, 2021 · acfc337 · acfc337
1 parent 28e2599
commit acfc337
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
@@ -16,6 +16,7 @@ import type {
 } from '@theme/NavbarItem/DefaultNavbarItem';
 import IconExternalLink from '@theme/IconExternalLink';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {getInfimaActiveClassName} from './index';
 
 const dropdownLinkActiveClass = 'dropdown__link--active';
 
@@ -111,7 +112,7 @@ function DefaultNavbarItem({
   ...props
 }: Props): JSX.Element {
   const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return <Comp {...props} />;
+  return <Comp {...props} activeClassName={getInfimaActiveClassName(mobile)} />;
 }
 
 export default DefaultNavbarItem;
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
 import clsx from 'clsx';
+import {getInfimaActiveClassName} from './index';
 import type {Props} from '@theme/NavbarItem/DocNavbarItem';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {uniq} from '@docusaurus/utils-common';
@@ -46,9 +47,7 @@ export default function DocNavbarItem({
     ) as GlobalDataVersion[],
   );
   const doc = getDocInVersions(versions, docId);
-  const activeDocInfimaClassName = props.mobile
-    ? 'menu__link--active'
-    : 'navbar__link--active';
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
 
   return (
     <DefaultNavbarItem

diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx
@@ -55,6 +55,9 @@ function getComponentType(
   return type as NavbarItemComponentType;
 }
 
+export const getInfimaActiveClassName = (mobile?: boolean): string =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';
+
 export default function NavbarItem({type, ...props}: Props): JSX.Element {
   const componentType = getComponentType(
     type,