feat: Mark external links in sidebar with an icon (#360)

* feat: Mark external links with an icon

* Also mark "Protocol Registry" as external

Author: matheus23

src/app/docs/layout.jsx

@@ -17,7 +17,7 @@ export const navItems = [
     links: [
       {title: 'Overview', href: '/docs/overview'},
       {title: 'Quickstart', href: '/docs/quickstart'},
-      {title: 'Tour', href: '/docs/tour' },
+      {title: 'Tour', href: '/docs/tour'},
       {title: 'Examples', href: '/docs/examples'},
     ],
   },
@@ -34,11 +34,11 @@ export const navItems = [
   },
   {title: 'Resources',
     links: [
-      {title: 'Protocol Registry', href: '/proto'},
+      {title: 'Protocol Registry', href: '/proto', external: true},
       {title: 'Write your own Protocol', href: '/docs/protocols/writing'},
-      {title: 'Awesome List', href: 'https://github.com/n0-computer/awesome-iroh'},
-      {title: 'FAQ', href: '/docs/faq' },
-      {title: 'Wasm/Browser Support', href: '/docs/wasm-browser-support' },
+      {title: 'Awesome List', href: 'https://github.com/n0-computer/awesome-iroh', external: true},
+      {title: 'FAQ', href: '/docs/faq'},
+      {title: 'Wasm/Browser Support', href: '/docs/wasm-browser-support'},
     ],
   },
 ];

src/components/Libraries.jsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
 
 import {Button} from '@/components/Button';
 import {Heading} from '@/components/Heading';

src/components/Navigation.jsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import {usePathname} from 'next/navigation';
 import clsx from 'clsx';
 import {AnimatePresence, motion, useIsPresent} from 'framer-motion';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
 
 import {useIsInsideMobileNavigation} from '@/components/MobileNavigation';
 import {useSectionStore} from '@/components/SectionProvider';
@@ -29,7 +30,7 @@ function TopLevelNavItem({href, children}) {
   );
 }
 
-function NavLink({href, tag, active, isAnchorLink = false, children}) {
+function NavLink({href, tag, active, isAnchorLink = false, external, children}) {
   return (
     <Link
       href={href}
@@ -42,7 +43,10 @@ function NavLink({href, tag, active, isAnchorLink = false, children}) {
           'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
       )}
     >
-      <span className="truncate">{children}</span>
+      <span className="truncate inline-flex">
+        {children}
+        {external && <ArrowTopRightOnSquareIcon className="w-4 h-4 mt-1 ml-1" />}
+      </span>
       {tag && (
         <Tag variant="small" color="zinc">
           {tag}
@@ -145,7 +149,7 @@ function NavigationGroup({group, className}) {
         <ul role="list" className="border-l border-transparent">
           {group.links.map((link) => (
             <motion.li key={link.href} layout="position" className="relative">
-              <NavLink href={link.href} active={link.href === pathname}>
+              <NavLink active={link.href === pathname} {...link}>
                 {link.title}
               </NavLink>
               <AnimatePresence mode="popLayout" initial={false}>