diff --git a/src/components/Navbar/NavLinks.tsx b/src/components/Navbar/NavLinks.tsx index 2a4b1b5..4687ebd 100644 --- a/src/components/Navbar/NavLinks.tsx +++ b/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 { StyledLink } from "./Navbar" +import { globalContext } from "../../globalContext" const StyledNavLinks = styled.div` display: flex; @@ -16,11 +18,15 @@ const StyledNavLinks = styled.div` ` const NavLinks = () => { + const { globalState } = useContext(globalContext) + return ( {NavbarData.map((item, index) => ( - {item.title} + + {globalState.locale == "en" ? item.title_en : item.title_kr} + ))} diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 2bbe6b2..0c5fb12 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/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 })} diff --git a/src/components/Sidebar/SubMenu.tsx b/src/components/Sidebar/SubMenu.tsx index ee1e8c8..b90be04 100644 --- a/src/components/Sidebar/SubMenu.tsx +++ b/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) => {
{props.item.icon} - {props.item.title} + + {globalState.locale == "en" + ? props.item.title_en + : props.item.title_kr} +
diff --git a/src/data/NavbarData.tsx b/src/data/NavbarData.tsx index 9cbd534..9e828b1 100644 --- a/src/data/NavbarData.tsx +++ b/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 = [ +const NavbarData: Item[] = [ { - title: "Home", + title_en: "Home", + title_kr: "홈", path: "/", icon: , }, { - title: "About", + title_en: "About", + title_kr: "About", path: "/about", icon: , }, { - title: "Portfolio", + title_en: "Portfolio", + title_kr: "포트폴리오", path: "/portfolio", icon: , },