카테고리 없음

Til (2023.02.15)

2023. 2. 20. 16:12

왼쪽에서 나오는 메뉴

 

리액트에서 메뉴 클릭시 왼쪽에서 나오는 메뉴는 단순히 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;
`;
저작자표시 (새창열림)
prdg
prdg
prdg
신정근 개발일지
prdg
전체
오늘
어제
  • 분류 전체보기 (89)
    • 프로젝트 (3)
    • 프로그래머스 (2)
    • 블록체인 (2)
    • 리액트 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • react
  • Blockchain
  • Props
  • socket.io
  • 리액트
  • 구조분해할당
  • ReactQuery
  • node.js
  • state
  • usemutation
  • touchableopacity
  • Recoil
  • SafeAreaView
  • ReactNative
  • TODOLIST
  • 블록체인
  • JavaScript
  • 프로그래머스
  • TypeScript
  • Node

최근 댓글

최근 글

hELLO · Designed By 정상우.
prdg
Til (2023.02.15)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.