-
Notifications
You must be signed in to change notification settings - Fork 581
/
BurgerIcon.js
59 lines (51 loc) · 1.3 KB
/
BurgerIcon.js
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
59
'use strict';
import React from 'react';
import Radium from 'radium';
let BurgerIcon = Radium(React.createClass({
getLineStyle(index) {
return {
position: 'absolute',
height: '20%',
left: 0,
right: 0,
top: 20 * (index * 2) + '%',
opacity: this.state.hover ? 0.6 : 1
};
},
handleHover() {
this.setState({ hover: !this.state.hover });
},
getInitialState() {
return { hover: false };
},
render() {
var buttonStyle = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
margin: 0,
padding: 0,
border: 'none',
fontSize: 14,
color: 'transparent',
background: 'transparent',
outline: 'none'
};
return (
<div className="bm-burger-button" style={ { zIndex: 1 } }>
<span className="bm-burger-bars" style={ this.getLineStyle(0) }></span>
<span className="bm-burger-bars" style={ this.getLineStyle(1) }></span>
<span className="bm-burger-bars" style={ this.getLineStyle(2) }></span>
<button onClick={ this.props.onClick }
onMouseEnter={ this.handleHover }
onMouseLeave={ this.handleHover }
style={ buttonStyle }>
Open Menu
</button>
</div>
);
}
}));
export default BurgerIcon;