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 * as Actions from 'vanth/actions/root';
import Navbar from 'vanth/navbar';
var Dashboard = React.createClass({
logout: function() {
@ -12,19 +13,8 @@ var Dashboard = React.createClass({
render: function() {
return (
<div className='container-fluid'>
<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="/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>
<Navbar/>
<p>Welcome home</p>
</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>
);
}
});