From 388e10471b8dc8b1cfc2525e77f2d6b7f5a13e1b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 17 Jun 2016 13:12:30 +0200
Subject: [PATCH] Use NavDropdown instead of DropdownButton in nav

---
 js/components/header.js               |  9 +++----
 js/components/header_notifications.js | 38 ++++++++++++++++-----------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/js/components/header.js b/js/components/header.js
index c0265062..52586901 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -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>
diff --git a/js/components/header_notifications.js b/js/components/header_notifications.js
index 8dfa6206..80b23f47 100644
--- a/js/components/header_notifications.js
+++ b/js/components/header_notifications.js
@@ -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;