From 014026c41d04b9d49ad4f5f17b5a55c7e4a381eb Mon Sep 17 00:00:00 2001
From: Ayush Chamoli <75367725+iamAyushChamoli@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:07:19 +0530
Subject: [PATCH] (Enhancement) Differenciate external links in the docs
 sidebar (#956)

* (Enhancement) Differenciate external links in the docs sidebar

Fixes #942

* Enhancement: Differentiate External Links

Added an external svg instead of embedding it inline
---
 components/Sidebar.tsx               | 11 +++++++++--
 public/icons/external-link-black.svg |  8 ++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 public/icons/external-link-black.svg

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 1b1f37fb9..8f3f1b779 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -8,6 +8,7 @@ import { SegmentHeadline } from './Layout';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 import CarbonAds from './CarbonsAds';
 import { useTheme } from 'next-themes';
+import ExternalLinkIcon from '../public/icons/external-link-black.svg';
 
 const DocLink = ({
   uri,
@@ -64,7 +65,7 @@ const DocLinkBlank = ({
   return (
     <Link
       href={uri}
-      className={classnames('text-sm block  py-1 pl-2', {
+      className={classnames('flex text-sm block  py-1 pl-2', {
         'font-medium': !isActive,
         'text-primary text-bold border-l-2 border-l-primary font-semibold':
           isActive,
@@ -75,12 +76,18 @@ const DocLinkBlank = ({
         if (onClick) onClick();
         setOpen(false);
       }}
+      style={{
+        position: 'relative',
+        paddingRight: '1.25em',
+      }}
     >
       {label}
+      <ExternalLinkIcon
+        style={{ marginLeft: '0.25em', width: '1em', height: '1em' }}
+      />
     </Link>
   );
 };
-
 const SegmentSubtitle = ({ label }: { label: string }) => {
   return (
     <div className='text-sm italic text-slate-900 dark:text-slate-400 mt-2 mb-2'>
diff --git a/public/icons/external-link-black.svg b/public/icons/external-link-black.svg
new file mode 100644
index 000000000..6ff4724b9
--- /dev/null
+++ b/public/icons/external-link-black.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="Interface / External_Link">
+    <path id="Vector" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file