added navlinks translation

src/components/Navbar/NavLinks.tsx

@@ -1,10 +1,12 @@
+import { useContext } from "react"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 
+import { StyledLink } from "./Navbar"
+
 import NavbarData from "../../data/NavbarData"
 import theming from "../../styles/theming"
-
+import { globalContext } from "../../globalContext"
-import { StyledLink } from "./Navbar"
 
 const StyledNavLinks = styled.div`
 	display: flex;
@@ -16,11 +18,15 @@ const StyledNavLinks = styled.div`
 `
 
 const NavLinks = () => {
+	const { globalState } = useContext(globalContext)
+
 	return (
 		<StyledNavLinks>
 			{NavbarData.map((item, index) => (
 				<Link key={index} to={item.path}>
-					<StyledLink>{item.title}</StyledLink>
+					<StyledLink>
+						{globalState.locale == "en" ? item.title_en : item.title_kr}
+					</StyledLink>
 				</Link>
 			))}
 		</StyledNavLinks>

src/components/Sidebar/Sidebar.tsx

@@ -8,7 +8,7 @@ import { faEllipsisV, faTimes } from "@fortawesome/free-solid-svg-icons"
 
 import SubMenu from "./SubMenu"
 
-import NavbarData, { Item } from "../../data/NavbarData"
+import NavbarData from "../../data/NavbarData"
 import theming from "../../styles/theming"
 
 const CommonSidebarToggleButtonStyle = css`
@@ -111,7 +111,7 @@ const Sidebar = () => {
 
 					{/* sidebar items */}
 
-					{NavbarData.map((item: Item, index) => {
+					{NavbarData.map((item, index) => {
 						return <SubMenu item={item} key={index} />
 					})}
 				</SidebarWrap>

src/components/Sidebar/SubMenu.tsx

@@ -2,12 +2,14 @@
  * @file Submenu item for sidebar
  */
 
-import { useCallback, useState } from "react"
+import { useCallback, useContext, useState } from "react"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
 
-import { Item } from "../../data/NavbarData"
 import theming from "../../styles/theming"
+import { globalContext } from "../../globalContext"
+
+import type { Item } from "../../data/NavbarData"
 
 const SidebarLink = styled(Link)`
 	${theming.styles.navbarButtonStyle};
@@ -35,6 +37,7 @@ interface Props {
 }
 
 const SubMenu = (props: Props) => {
+	const { globalState } = useContext(globalContext)
 	const [isSubNavOpen, setSubNavOpen] = useState(false)
 	const handleSidebarLinkClick = useCallback(() => {
 		setSubNavOpen((prev) => !prev)
@@ -45,7 +48,11 @@ const SubMenu = (props: Props) => {
 			<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
 				<div>
 					{props.item.icon}
-					<SidebarLabel>{props.item.title}</SidebarLabel>
+					<SidebarLabel>
+						{globalState.locale == "en"
+							? props.item.title_en
+							: props.item.title_kr}
+					</SidebarLabel>
 				</div>
 			</SidebarLink>
 		</>

src/data/NavbarData.tsx

@@ -9,22 +9,26 @@ import {
 export type Item = {
 	path: string
 	icon: JSX.Element
-	title: string
+	title_en: string
+	title_kr: string
 }
 
-const NavbarData: Array<Item> = [
+const NavbarData: Item[] = [
 	{
-		title: "Home",
+		title_en: "Home",
+		title_kr: "홈",
 		path: "/",
 		icon: <FontAwesomeIcon icon={faHome} />,
 	},
 	{
-		title: "About",
+		title_en: "About",
+		title_kr: "About",
 		path: "/about",
 		icon: <FontAwesomeIcon icon={faIdCard} />,
 	},
 	{
-		title: "Portfolio",
+		title_en: "Portfolio",
+		title_kr: "포트폴리오",
 		path: "/portfolio",
 		icon: <FontAwesomeIcon icon={faAddressBook} />,
 	},