1
1
/** @jsx jsx */
2
2
/** @jsxRuntime classic */
3
3
import { jsx , css } from '@emotion/react' ;
4
+ import styled from '@emotion/styled' ;
4
5
import { useRecoilState } from 'recoil' ;
6
+ import { animated , useSpring , useTransition } from 'react-spring' ;
5
7
6
8
import { HeaderButton } from '@components/atoms' ;
7
9
import { ReactComponent as HamburgerMenu } from '@assets/hamburgerMenu.svg' ;
8
10
import { ReactComponent as DoubleChevronRight } from '@assets/doubleChevronRight.svg' ;
9
11
import { hoveredMenuToggleState , staticMenuToggleState } from '@/stores' ;
10
12
import { Menu } from '@molecules/index' ;
11
13
12
- const wrapperCss = ( ) => css `
14
+ const wrapperCss = css `
13
15
position : relative;
14
16
display : flex;
15
17
align-items : center;
@@ -21,20 +23,17 @@ const wrapperCss = () => css`
21
23
margin-right : 8px ;
22
24
min-width : 0 ;
23
25
` ;
24
- const hoverAreaCss = ( ) => css `
26
+ const hoverAreaCss = css `
25
27
position : absolute;
26
28
display : inline-block;
27
29
top : 45px ;
28
30
left : 0 ;
29
31
width : 100% ;
30
32
height : 100vh ;
31
33
` ;
32
- const menuCss = ( staticMenuToggle : boolean ) => css `
34
+ const AnimatedMenu = styled ( animated . div ) `
33
35
position: absolute;
34
36
display: inline-block;
35
- top : ${ staticMenuToggle ? 0 : 50 } px;
36
- left : 0 ;
37
- margin-top : ${ staticMenuToggle ? 0 : 10 } px;
38
37
` ;
39
38
40
39
function HeaderMenu ( ) : JSX . Element {
@@ -44,23 +43,27 @@ function HeaderMenu(): JSX.Element {
44
43
const [ hoveredMenuToggle , setHoveredMenuToggle ] = useRecoilState (
45
44
hoveredMenuToggleState ,
46
45
) ;
46
+ const menuStyleProps = useSpring ( {
47
+ top : staticMenuToggle ? 0 : 50 ,
48
+ left : hoveredMenuToggle || staticMenuToggle ? 0 : - 240 ,
49
+ opacity : hoveredMenuToggle || staticMenuToggle ? 1 : 0 ,
50
+ marginTop : staticMenuToggle ? 0 : 10 ,
51
+ } ) ;
47
52
48
53
return (
49
54
< div
50
- css = { wrapperCss ( ) }
55
+ css = { wrapperCss }
51
56
onMouseEnter = { ( ) => setHoveredMenuToggle ( true ) }
52
57
onMouseLeave = { ( ) => setHoveredMenuToggle ( false ) }
53
58
>
54
59
< HeaderButton clickHandler = { ( ) => setStaticMenuToggle ( ! staticMenuToggle ) } >
55
60
{ staticMenuToggle ||
56
61
( ! hoveredMenuToggle ? < HamburgerMenu /> : < DoubleChevronRight /> ) }
57
62
</ HeaderButton >
58
- < div css = { hoverAreaCss ( ) } />
59
- { ( staticMenuToggle || hoveredMenuToggle ) && (
60
- < div css = { menuCss ( staticMenuToggle ) } >
61
- < Menu />
62
- </ div >
63
- ) }
63
+ < div css = { hoverAreaCss } />
64
+ < AnimatedMenu style = { menuStyleProps } >
65
+ < Menu />
66
+ </ AnimatedMenu >
64
67
</ div >
65
68
) ;
66
69
}
0 commit comments