Use classnames package to manage classnames

https://facebook.github.io/react/docs/class-name-manipulation.html

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "autoprefixer-loader": "2.1.0",
+    "classnames": "2.1.3",
     "css-loader": "0.17.0",
     "eslint": "1.3.1",
     "eslint-plugin-react": "3.3.1",

src/components/navigation/dropdown.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var classNames = require('classnames');
 
 require('./dropdown.scss');
 
@@ -22,13 +23,13 @@ module.exports = React.createClass({
         }
     },
     render: function () {
-        var className = [
+        var classes = classNames(
             'dropdown',
             this.props.className,
-            this.props.isOpen ? 'open' : ''
-        ].join(' ');
+            {open: this.props.isOpen}
+        );
         return (
-            <this.props.as className={className}>
+            <this.props.as className={classes}>
                 {this.props.children}
             </this.props.as>
         );

src/components/navigation/navigation.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var classNames = require('classnames');
 var Login = require('../login/login.jsx');
 var Dropdown = require('./dropdown.jsx');
 
@@ -36,12 +37,12 @@ module.exports = React.createClass({
         this.setState({'accountNavOpen': false});
     },
     render: function () {
-        var className = [
-            'inner',
-            this.state.loggedIn ? 'logged-in' : 'logged-out'
-        ].join(' ');
+        var classes = classNames({
+            'inner': true,
+            'logged-in': this.state.loggedIn
+        });
         return (
-            <div className={className}>
+            <div className={classes}>
                 <ul>
                     <li className="logo"><a href="/"></a></li>