developomp
71a74daf24
- separated resume contents from portfolio - increased sidebar icon size - updated sidebar icons - updated fontawesome icon versoin
66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
/**
|
|
* @file Submenu item for sidebar
|
|
*/
|
|
|
|
import { useCallback, useContext, useState } from "react"
|
|
import { Link } from "react-router-dom"
|
|
import styled from "styled-components"
|
|
|
|
import theming from "../../styles/theming"
|
|
import { globalContext } from "../../globalContext"
|
|
|
|
import type { Item } from "../../data/NavbarData"
|
|
|
|
const SidebarLink = styled(Link)`
|
|
${theming.styles.navbarButtonStyle};
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
justify-content: space-between;
|
|
height: 2rem;
|
|
align-items: center;
|
|
padding: 20px;
|
|
list-style: none;
|
|
|
|
svg {
|
|
scale: 1.5;
|
|
}
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
`
|
|
|
|
const SidebarLabel = styled.span`
|
|
margin-left: 1rem;
|
|
`
|
|
|
|
interface Props {
|
|
item: Item
|
|
}
|
|
|
|
const SubMenu = (props: Props) => {
|
|
const { globalState } = useContext(globalContext)
|
|
const [isSubNavOpen, setSubNavOpen] = useState(false)
|
|
const handleSidebarLinkClick = useCallback(() => {
|
|
setSubNavOpen((prev) => !prev)
|
|
}, [isSubNavOpen])
|
|
|
|
return (
|
|
<>
|
|
<SidebarLink to={props.item.path} onClick={handleSidebarLinkClick}>
|
|
<div>
|
|
{props.item.icon}
|
|
<SidebarLabel>
|
|
{globalState.locale == "en"
|
|
? props.item.title_en
|
|
: props.item.title_kr}
|
|
</SidebarLabel>
|
|
</div>
|
|
</SidebarLink>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SubMenu
|