feat(v2): add icon to external navbar links (#4949)

* feat(v2): add icon to external navbar links

* use isInternalUrl

* Remove demo link

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx

@@ -6,15 +6,19 @@
  */
 
 import React from 'react';
+import type {Props} from '@theme/IconExternalLink';
 
 import styles from './styles.module.css';
 
-const IconExternalLink = (): JSX.Element => {
+const IconExternalLink = ({
+  width = 13.5,
+  height = 13.5,
+}: Props): JSX.Element => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="14"
+      width={width}
-      height="14"
+      height={height}
       role="img"
       viewBox="0 0 24 24"
       className={styles.iconExternalLink}>

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

@@ -16,6 +16,10 @@ import type {
   DesktopOrMobileNavBarItemProps,
   Props,
 } from '@theme/NavbarItem/DefaultNavbarItem';
+import IconExternalLink from '@theme/IconExternalLink';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+
+const dropdownLinkActiveClass = 'dropdown__link--active';
 
 function NavLink({
   activeBasePath,
@@ -32,6 +36,8 @@ function NavLink({
   const toUrl = useBaseUrl(to);
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  const isExternalLink = label && href && !isInternalUrl(href);
+  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
 
   return (
     <Link
@@ -53,7 +59,14 @@ function NavLink({
               : null),
           })}
       {...props}>
+      {isExternalLink ? (
+        <span>
           {label}
+          <IconExternalLink {...(isDropdownLink && {width: 12, height: 12})} />
+        </span>
+      ) : (
+        label
+      )}
     </Link>
   );
 }
@@ -137,7 +150,7 @@ function NavItemDesktop({
                   }
                 }
               }}
-              activeClassName="dropdown__link--active"
+              activeClassName={dropdownLinkActiveClass}
               className={navLinkClassNames(childItemClassName, true)}
               {...childItemProps}
             />

packages/docusaurus-theme-classic/src/types.d.ts

@@ -599,3 +599,12 @@ declare module '@theme/IconLanguage' {
   const IconLanguage: (props: Props) => JSX.Element;
   export default IconLanguage;
 }
+
+declare module '@theme/IconExternalLink' {
+  import type {ComponentProps} from 'react';
+
+  export type Props = ComponentProps<'svg'>;
+
+  const IconExternalLink: (props: Props) => JSX.Element;
+  export default IconExternalLink;
+}

website/docusaurus.config.js

@@ -372,7 +372,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
           dropdownActiveClassDisabled: true,
           dropdownItemsAfter: [
             {
-              to: 'https://v1.docusaurus.io',
+              href: 'https://v1.docusaurus.io',
               label: '1.x.x',
             },
             {
@@ -386,7 +386,7 @@ const isVersioningDisabled = !!process.env.DISABLE_VERSIONING || isI18nStaging;
           position: 'right',
           dropdownItemsAfter: [
             {
-              to: 'https://github.com/facebook/docusaurus/issues/3526',
+              href: 'https://github.com/facebook/docusaurus/issues/3526',
               label: 'Help Us Translate',
             },
           ],