Update to react-bootstrap 0.28.1 and widen react nav

+ Moved away from deprecated navbar components and props
+ Removed mixin from NavItem
+ Updated stylesheet so the `.container` react-bootstrap adds doesn't impact nav positioning

client/less/main.less

@@ -150,6 +150,12 @@ ul {
   font-size: 26px;
 }
 
+.navbar > .container {
+  width: auto;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .nav-height {
   height: 50px;
   border: none;
@@ -770,7 +776,7 @@ iframe.iphone {
   }
 }
 
-.hamburger {
+.navbar-toggle {
   width: 80px;
   padding-left: 0px;
   padding-right: 8px;

common/app/components/Nav/Nav.jsx

@@ -2,9 +2,8 @@ import React, { PropTypes } from 'react';
 import { LinkContainer } from 'react-router-bootstrap';
 import {
   Col,
-  CollapsibleNav,
   Nav,
-  NavBrand,
+  NavbarBrand,
   Navbar,
   NavItem
 } from 'react-bootstrap';
@@ -24,12 +23,10 @@ const logoElement = (
   </a>
 );
 
-const toggleButton = (
+const toggleButtonChild = (
-  <button className='hamburger'>
     <Col xs={ 12 }>
       <span className='hamburger-text'>Menu</span>
     </Col>
-  </button>
 );
 
 function getDashedName() {
@@ -61,7 +58,7 @@ export default React.createClass({
             key={ content }
             to={ link }>
             <NavItem
-              target={ target || null } >
+              target={ target || null }>
               { content }
             </NavItem>
           </LinkContainer>
@@ -100,10 +97,11 @@ export default React.createClass({
       return null;
     }
     return (
-      <NavItem
+      <FCCNavItem
+        className='brownie-points-nav'
         href={ '/' + username }>
         [ { points } ]
-      </NavItem>
+      </FCCNavItem>
     );
   },
 
@@ -123,7 +121,7 @@ export default React.createClass({
     } else {
       return (
         <FCCNavItem
-          className='btn signup-btn signup-btn-nav'
+          className='btn signup-btn signup-btn-nav signin-button-nav'
           eventKey={ 2 }
           href='/login'>
           Sign In
@@ -138,21 +136,20 @@ export default React.createClass({
     return (
       <Navbar
         className='nav-height'
-        fixedTop={ true }
+        fixedTop={ true }>
-        toggleButton={ toggleButton }
+        <NavbarBrand>{ logoElement }</NavbarBrand>
-        toggleNavKey={ 0 }>
+        <Navbar.Toggle children={ toggleButtonChild } />
-        <NavBrand>{ logoElement }</NavBrand>
+        <Navbar.Collapse eventKey={ 0 }>
-        <CollapsibleNav eventKey={ 0 }>
           <Nav
             className='hamburger-dropdown'
             navbar={ true }
-            right={ true }>
+            pullRight={ true }>
             { this.renderLearnBtn() }
             { this.renderLinks() }
             { this.renderPoints(username, points) }
             { this.renderSignin(username, picture) }
           </Nav>
-        </CollapsibleNav>
+        </Navbar.Collapse>
       </Navbar>
     );
   }

common/app/components/Nav/NavItem.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
-import BootstrapMixin from 'react-bootstrap/lib/BootstrapMixin';
 
 export default React.createClass({
   displayName: 'FCCNavItem',
 
-  mixins: [BootstrapMixin],
-
   propTypes: {
     active: React.PropTypes.bool,
     'aria-controls': React.PropTypes.string,

common/app/components/Nav/links.json

@@ -5,14 +5,14 @@
   "content": "Chat",
   "link": "//gitter.im/FreeCodeCamp/FreeCodeCamp",
   "target": "_blank"
-},{
-  "content": "Wiki",
-  "link": "https://github.com/freecodecamp/freecodecamp/wiki/",
-  "target": "_blank"
 },{
   "content": "News",
   "link": "/news",
   "target": "_blank"
+},{
+  "content": "Wiki",
+  "link": "https://github.com/freecodecamp/freecodecamp/wiki/",
+  "target": "_blank"
 },{
   "content": "Jobs",
   "link": "/jobs",
@@ -20,5 +20,4 @@
 },{
   "content": "Links",
   "link": "/links"
-},{
 }]

package.json

@@ -99,7 +99,7 @@
     "pmx": "~0.5.5",
     "ramda": "~0.18.0",
     "react": "~0.14.2",
-    "react-bootstrap": "0.27.3",
+    "react-bootstrap": "~0.28.1",
     "react-motion": "~0.3.1",
     "react-router": "^1.0.0",
     "react-router-bootstrap": "https://github.com/FreeCodeCamp/react-router-bootstrap.git#freecodecamp",