Style Nav Update

This commit is contained in:
2017-01-16 01:05:17 -08:00
parent 4586ce2281
commit 02a7df11f9
2 changed files with 49 additions and 23 deletions

View File

@@ -1,27 +1,53 @@
var React = require('react'); var React = require('react');
var {Link, IndexLink} = require('react-router'); var {Link, IndexLink} = require('react-router');
// var Nav = React.createClass({ var Nav = React.createClass({
// render: function (){ onSearch: function (e) {
// return ( e.preventDefault();
// <div> alert('Not yet wired up!');
// <h2>Nav Component</h2> },
// <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink> render: function (){
// <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link> return (
// <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link> <div className="top-bar">
// </div> <div className="top-bar-left">
// ); <ul className="menu">
// } <li className="menu-text">React Weather App</li>
// }); <li>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Get Weather</IndexLink>
</li>
<li>
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>About</Link>
</li>
<li>
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Examples</Link>
</li>
</ul>
</div>
<div className="top-bar-right">
<form onSubmit={this.onSearch}>
<ul className="menu">
<li>
<input type="search" placeholder="Search weather"/>
</li>
<li>
<input type="submit" className="button" value="Get Weather"/>
</li>
</ul>
</form>
</div>
</div>
);
}
});
var Nav = () => { // var Nav = () => {
return ( // return (
<div> // <div>
<h2>Nav Component</h2> // <h2>Nav Component</h2>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink> // <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link> // <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link> // <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
</div> // </div>
); // );
}; // };
module.exports = Nav; module.exports = Nav;

File diff suppressed because one or more lines are too long