npm i --save-dev @types/styled-components
사이드바, 사이드바 버튼클릭시 페이지로 이동
//sideNav.tsx
import styled from "styled-components";
import { Link, useLocation } from "react-router-dom";
interface Props {
children: JSX.Element;
menuName: string;
path: string;
}
interface ContainerProps {
focus: boolean;
}
const ContentContainer = styled.div`
width: 100%;
height: 100%;
`;
const Container = styled.div<ContainerProps>`
width: 100%;
height: 100vh;
display: flex;
font-size: 1.5rem;
&:hover {
cursor: pointer;
}
a {
text-decoration: none;
color: ${({ theme }) => theme.textColor};
}
`;
const NavBar = styled.div`
width: 300px;
height: 100%;
background-color: #d9d9d9;
`;
const Menu = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
li {
width: 100%;
height: 50px;
}
`;
const menuList = [
{ menuName: "ComAround", path: "/mainpage" },
{ menuName: "네이버", path: "/companypage" },
{ menuName: "카카오", path: "/companypage" },
{ menuName: "라인", path: "/companypage" },
{ menuName: "쿠팡", path: "/companypage" },
{ menuName: "우아한 형제들", path: "/companypage" },
];
const Sidebar = ({ children, path }: Props) => {
const { pathname } = useLocation();
const focus = pathname === path ? true : false;
return (
<Container focus={focus}>
<NavBar>
<Menu>
{menuList.map((menu) => (
<li key={menu.menuName}>
<Link to={menu.path}>{menu.menuName}</Link>
</li>
))}
</Menu>
</NavBar>
<ContentContainer>{children}</ContentContainer>
</Container>
);
};
export default Sidebar;
//Router.tsx
import { BrowserRouter, Route, Routes } from "react-router-dom";
import CompanyPage from "../pages/CompanyPage";
import MainPage from "../pages/MainPage";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/MainPage" element={<MainPage />} />
<Route path="/companypage" element={<CompanyPage />} />
</Routes>
</BrowserRouter>
);
};
export default Router;
App.tsx
import Router from './shared/Router';
function App() {
return <Router />
;
}
export default App;