Add logged in state and dropdown

src/components/login/login.jsx

@@ -3,8 +3,12 @@ var React = require('react');
 require('./login.scss');
 
 module.exports = React.createClass({
+    propTypes: {
+        onLogIn: React.PropTypes.func
+    },
     handleSubmit: function (event) {
         event.preventDefault();
+        this.props.onLogIn();
     },
     render: function () {
         return (

src/components/login/login.scss

@@ -1,4 +1,6 @@
 .login {
+    padding: 14px 9px;
+
     .submit-button {
         margin-right: 3px;
     }

src/components/navigation/_colors.scss

@@ -0,0 +1,3 @@
+$base-background-color: #0f8bc0;
+$active-background-color: rgb(1, 96, 135);
+$border-color: rgb(20, 154, 203);

src/components/navigation/dropdown.jsx

@@ -0,0 +1,36 @@
+var React = require('react');
+
+require('./dropdown.scss');
+
+module.exports = React.createClass({
+    mixins: [
+        require('react-onclickoutside')
+    ],
+    propTypes: {
+        onRequestClose: React.PropTypes.func,
+        isOpen: React.PropTypes.bool
+    },
+    getDefaultProps: function () {
+        return {
+            as: 'div',
+            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 (
+            <this.props.as className={className}>
+                {this.props.children}
+            </this.props.as>
+        );
+    }
+});

src/components/navigation/dropdown.scss

@@ -0,0 +1,74 @@
+@import 'colors';
+
+.dropdown {
+    position: absolute;
+    right: 0;
+    min-width: 160px;
+    max-width: 220px;
+    background-color: $base-background-color;
+    overflow: hidden;
+    border-radius: 0px 0px 4px 4px;
+    box-shadow: inset 0 1px 1px rgba(100,100,100,.25),0 1px 1px rgba(0,0,0,.25);
+    color: white;
+    font-weight: normal;
+    font-size: 0.8125rem;
+
+    display: none;
+    &.open {
+        display: block;
+    }
+
+    a {
+        color: white;
+    }
+
+    input {
+        // 100% minus border and padding
+        width: calc(100% - 2px - 8px);
+        margin-bottom: 9px;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 5px;        
+    }
+    
+    > li {
+        display: block;
+        line-height: 30px;
+
+        &.divider {
+            border-top: 1px solid #149acb;
+            margin-top: 10px;
+        }
+
+        a {
+            display: block;
+            padding: 0 10px;
+
+            &:hover {
+                background-color: $active-background-color;
+                text-decoration: none;
+            }
+        }
+    }        
+
+    &.with-arrow {
+        $arrow-border-width: 11px;
+        overflow: visible;
+        margin-top: $arrow-border-width;
+        border-radius: 4px;
+        &: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: " ";
+        }
+    }
+}

src/components/navigation/navigation.jsx

@@ -1,44 +1,19 @@
 var React = require('react');
 var Login = require('../login/login.jsx');
+var Dropdown = require('./dropdown.jsx');
 
 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
+            'loginOpen': false,
+            'loggedIn': false,
+            'loggedInUser': {
+                'username': 'raimondious',
+                'thumbnail': '//cdn2.scratch.mit.edu/get_image/user/2584924_32x32.png'
+            },
+            'accountNavOpen': false
         };
     },
     handleLoginClick: function (e) {
@@ -48,9 +23,25 @@ module.exports = React.createClass({
     closeLogin: function () {
         this.setState({'loginOpen': false});
     },
+    handleLogIn: function () {
+        this.setState({'loggedIn': true});
+    },
+    handleLogOut: function () {
+        this.setState({'loggedIn': false});
+    },
+    handleClickAccountNav: function () {
+        this.setState({'accountNavOpen': true});
+    },
+    closeAccountNav: function () {
+        this.setState({'accountNavOpen': false});
+    },
     render: function () {
+        var className = [
+            'inner',
+            this.state.loggedIn ? 'logged-in' : 'logged-out'
+        ].join(' ');
         return (
-            <div className="inner">
+            <div className={className}>
                 <ul>
                     <li className="logo"><a href="/"></a></li>
                     
@@ -68,17 +59,38 @@ module.exports = React.createClass({
                             <input type="hidden" name="sort_by" value="datetime_shared" />
                         </form>
                     </li>
-
+                    {this.state.loggedIn ? [
-                    <li className="link right"><a href="/join">Join Scratch</a></li>
+                        <li className="link right messages"><a href="/messages/" title="Messages">Messages</a></li>,
-                    <li className="link right">
+                        <li className="link right mystuff"><a href="/mystuff/" title="My Stuff">My Stuff</a></li>,
-                        <a href="" onClick={this.handleLoginClick}>Sign In</a>
+                        <li className="link right account-nav">
-                        <Dropdown
+                            <a href="#" onClick={this.handleClickAccountNav}>
-                            className="login"
+                                <img src={this.state.loggedInUser.thumbnail} />
-                            isOpen={this.state.loginOpen}
+                                {this.state.loggedInUser.username}
-                            onRequestClose={this.closeLogin}>
+                            </a>
-                            <Login />
+                            <Dropdown
-                        </Dropdown>
+                                    as="ul"
-                    </li>
+                                    isOpen={this.state.accountNavOpen}
+                                    onRequestClose={this.closeAccountNav}>
+                                <li><a href="/users/raimondious/">Profile</a></li>
+                                <li><a href="/mystuff/">My Stuff</a></li>
+                                <li><a href="/accounts/settings/">Account settings</a></li>
+                                <li className="divider">
+                                    <a href="#" onClick={this.handleLogOut}>Sign out</a>
+                                </li>
+                            </Dropdown>
+                        </li>
+                    ] : [
+                        <li className="link right join"><a href="/join">Join Scratch</a></li>,
+                        <li className="link right">
+                            <a href="#" onClick={this.handleLoginClick}>Sign In</a>
+                            <Dropdown
+                                    className="login-dropdown with-arrow"
+                                    isOpen={this.state.loginOpen}
+                                    onRequestClose={this.closeLogin}>
+                                <Login onLogIn={this.handleLogIn} />
+                            </Dropdown>
+                        </li>
+                    ]}
                 </ul>
             </div>
         );

src/components/navigation/navigation.scss

@@ -1,5 +1,4 @@
-$base-background-color: #0f8bc0;
+@import 'colors';
-$border-color: rgb(20, 154, 203);
 
 #navigation {
     position: fixed;
@@ -13,7 +12,7 @@ $border-color: rgb(20, 154, 203);
     /* NOTE: Height should match offset settings in main.scss file */
     height: 35px;
 
-    ul {
+    .inner > ul {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
@@ -24,7 +23,7 @@ $border-color: rgb(20, 154, 203);
         padding: 0;
         list-style: none;
         
-        li {
+        > li {
             display: inline-block;
             align-self: flex-start;
             float: left;
@@ -65,7 +64,7 @@ $border-color: rgb(20, 154, 203);
             }
 
             > a:hover {
-                background-color: rgb(1, 96, 135);
+                background-color: $active-background-color;
             }
         }
 
@@ -115,64 +114,77 @@ $border-color: rgb(20, 154, 203);
             margin-left: auto;
             font-weight: bold;
 
-            > a:hover {
-                background-color: #f79231;
-            }
-
             &:last-child {
                 border-right: 1px solid rgb(20, 154, 203);
             }
         }
 
-        .dropdown {
+        .join > a:hover {
-            $dropdown-padding-h: 14px;
+            background-color: #f79231;
-            $dropdown-padding-v: 9px;
+        }
-            position: absolute;
+
-            right: 0;
+        .messages, .mystuff {
+            > a {
+                background-repeat: no-repeat;
+                background-position: center center;
+                padding-left: 10px;
+                padding-right: 10px;
+                text-indent: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+
+        .messages {
+            > a {
+                background-image: url('/images/nav-notifications.png');
+                width: 22px;
+            }
+        }
+
+        .mystuff {
+            > a {
+                background-image: url('/images/mystuff.png');
+                width: 25px;
+            }
+        }
+
+        .login-dropdown {
             width: 200px;
-            padding: $dropdown-padding-v $dropdown-padding-h;
+        }
-            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;
+        .account-nav {
-            &.open {
+            > a {
-                display: block;
+                font-weight: normal;
+                font-size: 0.8125rem;
+
+                img {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 5px;
+                    vertical-align: middle;
+                }
+
+                &:after {
+                    $caret-border-width: 4px;
+                    margin-left: $caret-border-width;
+                    border: $caret-border-width solid transparent;
+                    border-bottom-width: 0;
+                    border-top-color: white;
+                    content: " ";
+                    opacity: 0.5;
+                    vertical-align: middle;
+                    width: 0;
+                    height: 0;
+                    display: inline-block;
+                }
             }
 
-            $arrow-border-width: 11px;
+            .dropdown {
-            margin-top: $arrow-border-width;
+                width: 100%;
-            &:before {
+                padding: 0;
-                position: absolute;
+                padding-top: 5px;
-                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: " ";
             }
-
-            a {
-                color: white;
-            }
-    
-            input {
-                // 100% minus border and padding
-                width: calc(100% - 2px - 8px);
-                margin-bottom: 9px;
-            }
-    
-            label {
-                display: block;
-                margin-bottom: 5px;        
-            }
-
         }
     }
 }