fix: add external link logic for navigation links (#2249)

Author: kanerep

src/components/Nav/Desktop.tsx

@@ -210,11 +210,14 @@ const LinkToPage = React.memo(function LinkToPage({
 	asPath: string
 }) {
 	const isActive = route === asPath.split('/?')[0].split('?')[0]
+	const isExternal = route.startsWith('http')
 
 	return (
 		<BasicLink
 			href={route}
 			data-linkactive={isActive}
+			target={isExternal ? '_blank' : undefined}
+			rel={isExternal ? 'noopener noreferrer' : undefined}
 			className="group/link -ml-1.5 flex flex-1 items-center gap-3 rounded-md p-1.5 hover:bg-black/5 focus-visible:bg-black/5 data-[linkactive=true]:bg-(--link-active-bg) data-[linkactive=true]:text-white dark:hover:bg-white/10 dark:focus-visible:bg-white/10"
 		>
 			{icon ? (

src/components/Nav/Mobile/Menu.tsx

@@ -168,9 +168,13 @@ const LinkToPage = React.memo(function LinkToPage({
 	setShow: (show: boolean) => void
 }) {
 	const isActive = route === asPath.split('/?')[0].split('?')[0]
+	const isExternal = route.startsWith('http')
+
 	return (
 		<BasicLink
 			href={route}
+			target={isExternal ? '_blank' : undefined}
+			rel={isExternal ? 'noopener noreferrer' : undefined}
 			data-linkactive={isActive}
 			className="-ml-1.5 flex items-center gap-3 rounded-md p-1.5 hover:bg-black/5 focus-visible:bg-black/5 data-[linkactive=true]:bg-(--link-active-bg) data-[linkactive=true]:text-white dark:hover:bg-white/10 dark:focus-visible:bg-white/10"
 			onClick={() => setShow(false)}