import React, { useState } from 'react'
import styled, {css} from 'styled-components';
function Sidebar() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Container>
<button onClick={() => setIsOpen(true)}>열기</button>
</Container>
<SidebarBox isOpen={isOpen}>
<button onClick={() => setIsOpen(false)}>X</button>
<p>이름: 내이름</p>
</SidebarBox>
</>
)
}
const Container = styled.div`
margin: 0;
overflow: hidden; // translate(-100%)로 올라간 스크롤 없애줌
background: gray;
`;
const SidebarBox = styled.div`
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%); // 사이드바 위로 올려둠
width: 12.5rem;
padding: 0.875rem;
border-radius: 0.25rem;
background: #fff;
opacity: 0; // 투명도 조절하여 부드럽게 보이게하기
transition: transform 500ms linear, opacity 500ms linear;
pointer-events: none; // 사이드바 비활성화 일 때 클릭 안 됨
& button {
cursor: pointer;
}
${props => props.isOpen && css`
transform: translateY(0);
opacity: 1;
pointer-events: visible;
`}
`;
export default Sidebar
- 예전부터 하고 싶었던 부드럽게 흘러나오는 사이드바...드디어 알아냈다...(샤라웃 투 n0hack)
포인터 이벤트
- opacity로 불투명도 줬을 때 안 보이지만 박스 내부 클릭은 작동해서 포기했었다.
- 이번엔 opacity와 pointer-events: none 으로 설정하여 아무리 마우스를 굴려봤자 안 된다구
translate를 이용한 엘리베이터
- top left 등을 이용해서만 움직임을 표현하려고 했는데 translate가 괜히 나온 게 아니다. 역시 해결사
- 나는 위에서 나오는 박스를 구현했지만 사이드바를 원하면 translateX(-100%) 해주면 될 듯하다. 물론 난 안 해봤다.
- overflow: hidden으로 낄끼빠빠 스크롤바(라임 지렸다)를 없애준다.