React +Typescript Sidebar

설치!

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;