const BugerMenu = styled.div<Props>`
width: 100%;
height: 30px;
position: fixed;
top: 5px;
left: 5px;
display: flex;
flex-direction: column;
box-sizing: border-box;
z-index: 101;
cursor: pointer;
div {
width: 30px;
height: 4px;
margin: 1px;
background-color: #000;
border-radius: 4px;
transition: all 0.4s;
&:nth-child(1){
transform: translateY(${(props) => props.toggle ? '10px' : 'none'})
rotate(${(props) => props.toggle ? '-45deg' : 'none'});
-moz-transform: translateY(${(props) => props.toggle ? '10px' : 'none'})
rotate(${(props) => props.toggle ? '-45deg' : 'none'});
-o-transform: translateY(${(props) => props.toggle ? '10px' : 'none'})
rotate(${(props) => props.toggle ? '-45deg' : 'none'});
-webkit-transform: translateY(${(props) => props.toggle ? '10px' : 'none'})
rotate(${(props) => props.toggle ? '-45deg' : 'none'});
}
&:nth-child(2){
opacity: ${(props) => props.toggle ? '0' : 'none'}
}
&:nth-child(3){
transform: translateY(${(props) => props.toggle ? '-2px' : 'none'})
rotate(${(props) => props.toggle ? '45deg' : 'none'});
-moz-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'})
rotate(${(props) => props.toggle ? '45deg' : 'none'});
-o-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'})
rotate(${(props) => props.toggle ? '45deg' : 'none'});
-webkit-transform: translateY(${(props) => props.toggle ? '-2px' : 'none'})
rotate(${(props) => props.toggle ? '45deg' : 'none'});
}
}
`;
3줄을 가진 햄버거를 만든 후 toggle이 움직일 때 마다 1번째, 3번째 줄은 회전을 주고 2번째 줄은 투명화