From 526ce44933eac1dd7cba6838aa2a98f1852b2b20 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 9 Jun 2021 14:05:13 +0300
Subject: [PATCH] refactor(v2): use SVG for external link icon (#4914)

---
 .../src/theme/DocSidebar/index.tsx            | 11 +++++--
 .../src/theme/DocSidebar/styles.module.css    | 14 ---------
 .../src/theme/IconExternalLink/index.tsx      | 29 +++++++++++++++++++
 .../theme/IconExternalLink/styles.module.css  | 12 ++++++++
 4 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
 create mode 100644 packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
index 60efd6b77e..0ef9c63e75 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
@@ -18,6 +18,7 @@ import type {Props} from '@theme/DocSidebar';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import IconMenu from '@theme/IconMenu';
+import IconExternalLink from '@theme/IconExternalLink';
 import {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
@@ -179,7 +180,6 @@ function DocSidebarItemLink({
       <Link
         className={clsx('menu__link', {
           'menu__link--active': isActive,
-          [styles.menuLinkExternal]: !isInternalUrl(href),
         })}
         to={href}
         {...(isInternalUrl(href) && {
@@ -188,7 +188,14 @@ function DocSidebarItemLink({
           onClick: onItemClick,
         })}
         {...props}>
-        {label}
+        {isInternalUrl(href) ? (
+          label
+        ) : (
+          <span>
+            {label}
+            <IconExternalLink />
+          </span>
+        )}
       </Link>
     </li>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index c9508e40e2..f1c4da47d0 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -122,17 +122,3 @@
 :global(.menu__list-item--collapsed) :global(.menu__list) {
   height: 0 !important;
 }
-
-.menuLinkExternal {
-  align-items: center;
-}
-.menuLinkExternal:after {
-  content: '';
-  height: 1.15rem;
-  width: 1.15rem;
-  min-width: 1.15rem;
-  margin: 0 0 0 3%;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'/%3E%3C/svg%3E")
-    no-repeat;
-  filter: var(--ifm-menu-link-sublist-icon-filter);
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
new file mode 100644
index 0000000000..f7c103f797
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/index.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import styles from './styles.module.css';
+
+const IconExternalLink = (): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      role="img"
+      viewBox="0 0 24 24"
+      className={styles.iconExternalLink}>
+      <path
+        fill="currentColor"
+        d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
+      />
+    </svg>
+  );
+};
+
+export default IconExternalLink;
diff --git a/packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css
new file mode 100644
index 0000000000..1e8964ae9a
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.iconExternalLink {
+  margin-left: 0.3rem;
+  position: relative;
+  top: 1px;
+}