Til (2023.02.15)

왼쪽에서 나오는 메뉴

 

리액트에서 메뉴 클릭시 왼쪽에서 나오는 메뉴는 단순히 css를 이용했다

컴포넌트 안에서 스타일 컴포넌트에 props로 현재 메뉴가 닫힌지 열린지 구분하게 하고 trasition으로 부드럽게 나오게 했다

const MenuOpenDiv = styled.div<{ layoutMenu: String }>`
  width: 400px;
  height: 100%;
  background: #263245;
  position: fixed;
  left: ${(props) => (props.layoutMenu === "close" ? "-480px" : "80px")};
  top: 0;
  bottom: 0;
  transition: 0.5s ease-in-out;
  z-index: 99999;
  box-shadow: 2px 4px 15px 0 #000;

router.js안에서 페이지들을 모두 감싼 태그를 만든후 스타일 컴포넌트에서 다시 props로 메뉴 열린지 닫힌지 구분후 열리면 margin을 이용해 옆으로 밀리게했다 이렇게 되면 가로 스크롤이 생기는 문제가 발생했는데 overflow-x:hidden;으로 가로스크롤이 안생기게 했다.

const RouteFloat = styled.div<{ layoutMenu: String }>`
  margin-left: ${(props) => (props.layoutMenu === "close" ? "80px" : "480px")};
  transition: 0.5s ease-in-out;
  overflow-x: hidden;
`;