Add a dropdown component to the nav

package.json

@@ -38,6 +38,7 @@
     "node-sass": "3.3.2",
     "react": "0.13.3",
     "react-modal": "0.3.0",
+    "react-onclickoutside": "0.3.1",
     "react-slick": "0.7.0",
     "routes-to-nginx-conf": "0.0.2",
     "sass-loader": "2.0.1",

src/components/navigation/navigation.jsx

@@ -2,7 +2,51 @@ var React = require('react');
 
 require('./navigation.scss');
 
+var Dropdown = React.createClass({
+    mixins: [
+        require('react-onclickoutside')
+    ],
+    propTypes: {
+        onRequestClose: React.PropTypes.func,
+        isOpen: React.PropTypes.bool
+    },
+    getDefaultProps: function () {
+        return {
+            isOpen: false
+        };
+    },
+    handleClickOutside: function () {
+        if (this.props.isOpen) {
+            this.props.onRequestClose();
+        }
+    },
+    render: function () {
+        var className = [
+            'dropdown',
+            this.props.className,
+            this.props.isOpen ? 'open' : ''
+        ].join(' ');
+        return (
+            <div className={className}>
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
 module.exports = React.createClass({
+    getInitialState: function () {
+        return {
+            'loginOpen': false
+        };
+    },
+    handleLoginClick: function (e) {
+        e.preventDefault();
+        this.setState({'loginOpen': true});
+    },
+    closeLogin: function () {
+        this.setState({'loginOpen': false});
+    },
     render: function () {
         return (
             <div className="inner">
@@ -25,7 +69,15 @@ module.exports = React.createClass({
                     </li>
 
                     <li className="link right"><a href="/join">Join Scratch</a></li>
-                    <li className="link right"><a href="">Sign In</a></li>
+                    <li className="link right">
+                        <a href="" onClick={this.handleLoginClick}>Sign In</a>
+                        <Dropdown
+                            className="login"
+                            isOpen={this.state.loginOpen}
+                            onRequestClose={this.closeLogin}>
+                            I'm a dropdown
+                        </Dropdown>
+                    </li>
                 </ul>
             </div>
         );

src/components/navigation/navigation.scss

@@ -1,3 +1,6 @@
+$base-background-color: #0f8bc0;
+$border-color: rgb(20, 154, 203);
+
 #navigation {
     position: fixed;
     z-index: 10;
@@ -5,7 +8,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    background-color: #0f8bc0;
+    background-color: $base-background-color;
     
     /* NOTE: Height should match offset settings in main.scss file */
     height: 35px;
@@ -26,7 +29,8 @@
             align-self: flex-start;
             float: left;
             height: 100%;
-            border-left: 1px solid rgb(20, 154, 203);
+            border-left: 1px solid $border-color;
+            position: relative;
         }
 
         .logo {
@@ -86,7 +90,7 @@
                 height: 22px;
 
                 background-color: white;
-                background-image: url(/images/nav-search-glass.png);
+                background-image: url('/images/nav-search-glass.png');
                 background-repeat: no-repeat;
                 background-position: center center;
                 border-right: 1px solid #efefef;
@@ -119,5 +123,39 @@
                 border-right: 1px solid rgb(20, 154, 203);
             }
         }
+
+        .dropdown {
+            position: absolute;
+            right: 0;
+            width: 200px;
+            padding: 9px 14px;
+            background-color: $base-background-color;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            color: white;
+            font-weight: normal;
+            font-size: 0.8125rem;
+
+
+            display: none;
+            &.open {
+                display: block;
+            }
+
+            $arrow-border-width: 11px;
+            margin-top: $arrow-border-width;
+            &:before {
+                position: absolute;
+                display: block;
+                right: 10%;
+                top: -$arrow-border-width;
+                left: auto;
+                border-color: transparent;
+                border-bottom-color: $base-background-color;
+                border-style: solid;
+                border-width: 0 $arrow-border-width $arrow-border-width $arrow-border-width;
+                content: " ";
+            }
+        }
     }
 }