1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| const HamburgerSecondWrapper = styled.button`
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: ${HamBurgerConfig.width}px;
height: ${HamBurgerConfig.height}px;
border: none;
background-color: transparent;
cursor: pointer;
${MEDIA_PC} {
display: none;
}
${({ $isMenuOpen }) =>
$isMenuOpen &&
`
& > ${HamburgerSecondInner} {
transform: rotate(135deg);
}
& > ${HamburgerSecondInner}::before {
transform: rotate(90deg);
}
& > ${HamburgerSecondInner}::after {
transform: rotate(90deg);
}
`}
`;
const HamburgerSecondInner = styled.span`
width: ${HamBurgerConfig.width}px;
height: ${HamBurgerConfig.weight}px;
background-color: ${({ theme }) => theme.green_400};
transition: all 0.5s ease-in-out;
border-radius: 4px;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
width: 32px;
height: ${HamBurgerConfig.weight}px;
border-radius: 4px;
background-color: ${({ theme }) => theme.green_400};
transition: all 0.3s ease-in-out;
}
&::before {
transform: translateY(
-${Math.floor((HamBurgerConfig.height - HamBurgerConfig.weight) / 2)}px
);
}
&::after {
transform: translateY(
${Math.floor((HamBurgerConfig.height - HamBurgerConfig.weight) / 2)}px
);
}
`;
|
