feat: Mark external links in the sidebar (#6523)

Author: damianstasik

components/Containers/Sidebar/SidebarItem/index.module.css

@@ -6,11 +6,23 @@
     dark:text-neutral-200;
 
   a {
+    @apply inline-flex
+      items-center
+      gap-2
+      p-2;
+  }
+
+  .label {
     @apply w-full
-      p-2
       text-sm
       font-regular;
   }
+
+  .icon {
+    @apply size-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
 }
 
 .active {

components/Containers/Sidebar/SidebarItem/index.tsx

@@ -1,3 +1,4 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
 import type { FC } from 'react';
 
 import ActiveLink from '@/components/Common/ActiveLink';
@@ -13,7 +14,9 @@ type SidebarItemProps = {
 const SidebarItem: FC<SidebarItemProps> = ({ label, link }) => (
   <li className={styles.sideBarItem}>
     <ActiveLink href={link} activeClassName={styles.active}>
-      {label}
+      <span className={styles.label}>{label}</span>
+
+      {link.startsWith('http') && <ArrowUpRightIcon className={styles.icon} />}
     </ActiveLink>
   </li>
 );