Break out navbar into a separate component

Then we can reuse it. In everything
This commit is contained in:
Eli Ribble 2016-05-18 15:00:12 -06:00
parent db60fc99af
commit 2255d34ee9
2 changed files with 25 additions and 13 deletions

View File

@ -2,6 +2,7 @@ import * as BS from 'react-bootstrap';
import React from 'react'; import React from 'react';
import * as Actions from 'vanth/actions/root'; import * as Actions from 'vanth/actions/root';
import Navbar from 'vanth/navbar';
var Dashboard = React.createClass({ var Dashboard = React.createClass({
logout: function() { logout: function() {
@ -12,19 +13,8 @@ var Dashboard = React.createClass({
render: function() { render: function() {
return ( return (
<div className='container-fluid'> <div className='container-fluid'>
<BS.Navbar> <Navbar/>
<BS.Navbar.Header> <p>Welcome home</p>
<BS.Navbar.Brand>
<a href="/">Vanth</a>
</BS.Navbar.Brand>
</BS.Navbar.Header>
<BS.Nav>
<BS.NavItem eventKey={1} href="/thing">Thing</BS.NavItem>
<BS.NavDropdown eventKey={2} title="Account" id="account">
<BS.MenuItem eventKey={2.1} onClick={this.logout}>Logout</BS.MenuItem>
</BS.NavDropdown>
</BS.Nav>
</BS.Navbar>
</div> </div>
); );
} }

22
lib/navbar.js Normal file
View File

@ -0,0 +1,22 @@
import * as BS from 'react-bootstrap';
import React from 'react';
module.exports = React.createClass({
render: function() {
return (
<BS.Navbar>
<BS.Navbar.Header>
<BS.Navbar.Brand>
<a href="/">Vanth</a>
</BS.Navbar.Brand>
</BS.Navbar.Header>
<BS.Nav>
<BS.NavItem eventKey={1} href="#/accounts">Accounts</BS.NavItem>
<BS.NavDropdown eventKey={2} title="Account" id="account">
<BS.MenuItem eventKey={2.1} onClick={this.logout}>Logout</BS.MenuItem>
</BS.NavDropdown>
</BS.Nav>
</BS.Navbar>
);
}
});