From 57cf20933e9f9f7c257a5b24ae98db5d9cb981c5 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Tue, 15 Jun 2021 15:45:53 +0300
Subject: [PATCH] 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>
---
 .../src/theme/IconExternalLink/index.tsx        | 10 +++++++---
 .../src/theme/NavbarItem/DefaultNavbarItem.tsx  | 17 +++++++++++++++--
 .../docusaurus-theme-classic/src/types.d.ts     |  9 +++++++++
 website/docusaurus.config.js                    |  4 ++--
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
index f7c103f797..18484ef03b 100644
--- a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
+++ b/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"
-      height="14"
+      width={width}
+      height={height}
       role="img"
       viewBox="0 0 24 24"
       className={styles.iconExternalLink}>
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
index 6693645548..5a2698388c 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
+++ b/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}>
-      {label}
+      {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}
             />
diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts
index 3174b1f6b0..775e664ea7 100644
--- a/packages/docusaurus-theme-classic/src/types.d.ts
+++ b/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;
+}
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index a520a742c9..d86669a94f 100644
--- a/website/docusaurus.config.js
+++ b/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',
             },
           ],