Use NavDropdown instead of DropdownButton in nav

This commit is contained in:
Brett Sun 2016-06-17 13:12:30 +02:00
parent 6eac3663d0
commit 388e10471b
2 changed files with 26 additions and 21 deletions

View File

@ -5,8 +5,8 @@ import { Link } from 'react-router';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import NavItem from 'react-bootstrap/lib/NavItem';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
@ -93,8 +93,7 @@ let Header = React.createClass({
if (isLoggedIn) {
account = (
<DropdownButton
ref='dropdownbutton'
<NavDropdown
id="nav-route-user-dropdown"
title={currentUser.username}>
<LinkContainer to="/settings">
@ -117,7 +116,7 @@ let Header = React.createClass({
{getLangText('Log out')}
</MenuItem>
</LinkContainer>
</DropdownButton>
</NavDropdown>
);
// Let's assume that if the piece list hasn't loaded yet (ie. when
@ -170,10 +169,10 @@ let Header = React.createClass({
<Navbar.Collapse>
<Nav navbar pullRight>
<HeaderNotificationDebug show={false} />
<HeaderNotifications />
{account}
{signup}
</Nav>
<HeaderNotifications />
{navRoutesLinks}
</Navbar.Collapse>
</Navbar>

View File

@ -1,11 +1,12 @@
'use strict';
import React from 'react';
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import Nav from 'react-bootstrap/lib/Nav';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import NotificationActions from '../actions/notification_actions';
@ -97,20 +98,25 @@ let HeaderNotifications = React.createClass({
}
return (
<Nav navbar pullRight className="notification-menu">
<DropdownButton
ref='dropdownButton'
id="header-notification-dropdown"
title={
<span>
<Glyphicon color="green" glyph="envelope" />
<span className="notification-amount">({numNotifications})</span>
</span>
}>
{this.renderNotifications({ notifications: pieceListNotifications, isPiece: true })}
{this.renderNotifications({ notifications: editionListNotifications, isPiece: false })}
</DropdownButton>
</Nav>
<NavDropdown
ref="dropdownButton"
className="notification-menu"
id="header-notification-dropdown"
title={
<span>
<Glyphicon color="green" glyph="envelope" />
<span className="notification-amount">({numNotifications})</span>
</span>
}>
{this.renderNotifications({
notifications: pieceListNotifications,
isPiece: true
})}
{this.renderNotifications({
notifications: editionListNotifications,
isPiece: false
})}
</NavDropdown>
);
}
return null;