refactor: better external link icon positioning (#6994)

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

@@ -250,6 +250,7 @@ function DocSidebarItemLink({
 }: Props & {item: PropSidebarItemLink}) {
   const {href, label, className} = item;
   const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
   return (
     <li
       className={clsx(
@@ -260,17 +261,21 @@ function DocSidebarItemLink({
       )}
       key={label}>
       <Link
-        className={clsx('menu__link', {
-          'menu__link--active': isActive,
-        })}
+        className={clsx(
+          'menu__link',
+          !isInternalLink && styles.menuExternalLink,
+          {
+            'menu__link--active': isActive,
+          },
+        )}
         aria-current={isActive ? 'page' : undefined}
         to={href}
-        {...(isInternalUrl(href) && {
+        {...(isInternalLink && {
           onClick: onItemClick ? () => onItemClick(item) : undefined,
         })}
         {...props}>
         {label}
-        {!isInternalUrl(href) && <IconExternalLink />}
+        {!isInternalLink && <IconExternalLink />}
       </Link>
     </li>
   );

packages/docusaurus-theme-classic/src/theme/DocSidebarItem/styles.module.css

@@ -11,3 +11,7 @@
       var(--ifm-menu-link-padding-horizontal);
   }
 }
+
+.menuExternalLink {
+  align-items: center;
+}

packages/docusaurus-theme-classic/src/theme/IconExternalLink/styles.module.css

@@ -7,6 +7,4 @@
 
 .iconExternalLink {
   margin-left: 0.3rem;
-  position: relative;
-  top: 1px;
 }