reactdemo/jsx/header.jsx at master · ohager/reactdemo · GitHub

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
define(function (require) {

	var React = require('react');
	var Router = require('reactrouter');

	var Link = Router.Link;

	var MenuItem = React.createClass(
		{
			render: function () {
				return (
					<li>
						<Link to={this.props.link}>
							<span>&nbsp;{this.props.title}</span>
						</Link>
					</li>
				)
			}
		}
	);

	return React.createClass({
		getInitialState: function () {
			return {menuClicked: false};
		},

		componentDidMount: function () {

		},


		render: function () {

			return (
				<nav className="navbar navbar-fixed-top">
					<div className="container">
						<div className="navbar-header">
							<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
								aria-expanded="false" aria-controls="navbar">
								<span className="sr-only"></span>
								<span className="icon-bar"></span>
								<span className="icon-bar"></span>
								<span className="icon-bar"></span>
							</button>
							<a className="navbar-brand" href="#">
								<img src="images/logo.png" height="48" alt=""/>
							</a>
						</div>
						<div id="navbar" className="navbar-collapse collapse">
							<ul className="nav navbar-nav">
                              <li className="dropdown">
                                <a id="dropExample" href="#" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                                    <span className= "glyphicon glyphicon-star-empty" aria-hidden="true"></span> Examples <span className="caret"></span></a>
                                  <ul className="dropdown-menu" role="menu" aria-labelledby="dropExample">
                                      <MenuItem link="twoway" title="2-Way Binding" />
                                      <MenuItem link="notification" title="Notifications" />
                                      <MenuItem link="mixin" title="Mixin Example" />
                                      <MenuItem link="thousands" title="Thousands" />
									  <MenuItem link="composition" title="Coupled Composition" />
									  <MenuItem link="decoupledcomposition" title="Decoupled Composition" />
                                </ul>
                              </li>
                                <li className="dropdown">
                                    <a id="dropDecorator" href="#" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                                        <span className= "glyphicon glyphicon-record" aria-hidden="true"></span> Decorators <span className="caret"></span></a>
                                    <ul className="dropdown-menu" role="menu" aria-labelledby="dropDecorator">
                                        <MenuItem link="decorator.animation" title="Animation" />
                                        <MenuItem link="decorator.logging" title="Logging" />
                                        <MenuItem link="decorator.factory" title="Decorator Factory" />
                                    </ul>
                                </li>
								<li className="dropdown">
									<a id="dropPromises" href="#" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
										<span className= "glyphicon glyphicon-retweet" aria-hidden="true"></span> Promises <span className="caret"></span></a>
									<ul className="dropdown-menu" role="menu" aria-labelledby="dropPromises">
										<MenuItem link="q" title="Q" />
										<MenuItem link="harmony" title="Native Promises" />
									</ul>
								</li>
                                <li className="dropdown">
                                    <a id="dropFlux" href="#" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                                        <span className= "glyphicon glyphicon-retweet" aria-hidden="true"></span> Flux <span className="caret"></span></a>
                                    <ul className="dropdown-menu" role="menu" aria-labelledby="dropFlux">
                                        <MenuItem link="nanoflux" title="Simple Flux with Nanoflux" />
                                        <MenuItem link="fluxsimulator" title="Flux Simulator" />
                                    </ul>
                                </li>
							</ul>
						</div>
					</div>
				</nav>
			);
		}
	});
});