feat: allow external links in navbar and sidebar

apps/blog/src/components/Header/Nav.tsx

@@ -18,11 +18,17 @@ const Nav = styled.div`
 export default () => {
 	return (
 		<Nav>
-			{NavbarData.map((item, index) => (
-				<Link key={index} to={item.path}>
-					<HeaderButton>{item.title}</HeaderButton>
-				</Link>
-			))}
+			{NavbarData.map(({ path, title }, index) => {
+				return path.at(0) === "/" ? (
+					<Link key={index} to={path}>
+						<HeaderButton>{title}</HeaderButton>
+					</Link>
+				) : (
+					<a key={index} target="_blank" href={path}>
+						<HeaderButton>{title}</HeaderButton>
+					</a>
+				)
+			})}
 		</Nav>
 	)
 }

apps/blog/src/components/Sidebar/SubMenu.tsx

@@ -6,11 +6,11 @@ import type { Item } from "../../data/NavbarData"
 
 import { useCallback, useState } from "react"
 import { Link } from "react-router-dom"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
 
 import button from "../../styles/button"
 
-const SidebarLink = styled(Link)`
+const sharedStyle = css`
 	${button};
 	display: flex;
 	width: 100%;
@@ -31,6 +31,14 @@ const SidebarLink = styled(Link)`
 	}
 `
 
+const SidebarLink = styled(Link)`
+	${sharedStyle}
+`
+
+const SidebarAnchor = styled.a`
+	${sharedStyle}
+`
+
 const SidebarLabel = styled.span`
 	margin-left: 1rem;
 `
@@ -39,21 +47,31 @@ interface Props {
 	item: Item
 }
 
-const SubMenu = (props: Props) => {
+const SubMenu = ({ item }: Props) => {
+	const { path, icon, title } = item
 	const [isSubNavOpen, setSubNavOpen] = useState(false)
 	const handleSidebarLinkClick = useCallback(() => {
 		setSubNavOpen((prev) => !prev)
 	}, [isSubNavOpen])
 
-	return (
-		<>
-			<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
+	if (path.at(0) == "/") {
+		return (
+			<SidebarLink to={path} onClick={handleSidebarLinkClick}>
 				<div>
-					{props.item.icon}
-					<SidebarLabel>{props.item.title}</SidebarLabel>
+					{icon}
+					<SidebarLabel>{title}</SidebarLabel>
 				</div>
 			</SidebarLink>
-		</>
+		)
+	}
+
+	return (
+		<SidebarAnchor target="_blank" href={path} onClick={handleSidebarLinkClick}>
+			<div>
+				{icon}
+				<SidebarLabel>{title}</SidebarLabel>
+			</div>
+		</SidebarAnchor>
 	)
 }