-
Notifications
You must be signed in to change notification settings - Fork 28
/
Header.js
74 lines (63 loc) · 2.29 KB
/
Header.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import { IndexLink, Link } from 'react-router';
export default class Header extends React.Component {
static propTypes = {
title: React.PropTypes.string
}
constructor(props) {
super(props);
// init context bindings - due to diff between React.createClass and ES6 class
this.handleClick = this.handleClick.bind(this);
// init state
this.state = {
collapsed: true
};
}
handleClick() {
const { collapsed } = this.state;
this.setState({collapsed: !collapsed});
}
render() {
const collapsedMenuClassName = 'collapse navbar-collapse' + (this.state.collapsed === true ? '' : ' in');
const { title } = this.props;
return (
<div>
<nav className="navbar navbar-default" role="navigation">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" onClick={this.handleClick} className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<IndexLink to="/" className="navbar-brand logo">
<span>{title}</span>
</IndexLink>
</div>
<div className={collapsedMenuClassName} id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li><Link to="/github">Search Github Users</Link></li>
<li><Link to="/redux">About Redux</Link></li>
</ul>
</div>
</div>
</nav>
<ul className="site-networks">
<li className="twitter">
<a href="https://twitter.com/topheman" title="@topheman on twitter">
<span className="icon"></span>
<span className="desc">Twitter</span>
</a>
</li>
<li className="github">
<a href="https://github.com/topheman/react-es6-redux" title="Fork on github">
<span className="icon"></span>
<span className="desc">Github</span>
</a>
</li>
</ul>
</div>
);
}
}