render user picture and mobile nav

common/app/App.jsx

@@ -19,13 +19,19 @@ export default contain(
     displayName: 'FreeCodeCamp',
 
     propTypes: {
-      children: PropTypes.node
+      children: PropTypes.node,
+      username: PropTypes.string,
+      points: PropTypes.number,
+      picture: PropTypes.string
     },
 
     render() {
+      const { username, points, picture } = this.props;
+      const navProps = { username, points, picture };
       return (
         <div>
-          <Nav />
+          <Nav
+            { ...navProps }/>
           <Row>
             { this.props.children }
           </Row>

common/app/components/Nav/Nav.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import {
   Col,
+  CollapsibleNav,
   Nav,
   Navbar,
   NavItem
@@ -45,16 +46,34 @@ export default class extends React.Component {
 
   static displayName = 'Nav'
   static propTypes = {
-    signedIn: React.PropTypes.bool
+    points: PropTypes.number,
+    picture: PropTypes.string,
+    signedIn: PropTypes.bool,
+    username: PropTypes.string
   }
 
-  renderSignin() {
-    if (this.props.signedIn) {
+  renderPoints(username, points) {
+    if (!username) {
+      return null;
+    }
+    return (
+      <NavItem
+        href={ '/' + username }>
+        [ { points } ]
+      </NavItem>
+    );
+  }
+
+  renderSignin(username, picture) {
+    if (username) {
       return (
-        <NavItem
+        <div
+          className='hidden-xs hidden-sm'
           eventKey={ 2 }>
-          Show Picture
-        </NavItem>
+          <a href={ '/' + username }>
+            <img src={ picture } />
+          </a>
+        </div>
       );
     } else {
       return (
@@ -69,6 +88,7 @@ export default class extends React.Component {
   }
 
   render() {
+    const { username, points, picture } = this.props;
     return (
       <Navbar
         brand={ logoElement }
@@ -76,12 +96,16 @@ export default class extends React.Component {
         fixedTop={ true }
         toggleButton={ toggleButton }
         toggleNavKey={ 0 }>
-        <Nav
-          eventKey={ 0 }
-          right={ true }>
-          { navElements }
-          { this.renderSignin() }
-        </Nav>
+        <CollapsibleNav eventKey={ 0 }>
+          <Nav
+            className='hamburger-dropdown'
+            navbar={ true }
+            right={ true }>
+            { navElements }
+            { this.renderPoints(username, points)}
+            { this.renderSignin(username, picture) }
+          </Nav>
+        </CollapsibleNav>
       </Navbar>
     );
   }