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,17 +46,35 @@ 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
-          eventKey={ 2 }>
-          Show Picture
+        href={ '/' + username }>
+        [ { points } ]
       </NavItem>
     );
+  }
+
+  renderSignin(username, picture) {
+    if (username) {
+      return (
+        <div
+          className='hidden-xs hidden-sm'
+          eventKey={ 2 }>
+          <a href={ '/' + username }>
+            <img src={ picture } />
+          </a>
+        </div>
+      );
     } else {
       return (
         <FCCNavItem
@@ -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 }>
+        <CollapsibleNav eventKey={ 0 }>
           <Nav
-          eventKey={ 0 }
+            className='hamburger-dropdown'
+            navbar={ true }
             right={ true }>
             { navElements }
-          { this.renderSignin() }
+            { this.renderPoints(username, points)}
+            { this.renderSignin(username, picture) }
           </Nav>
+        </CollapsibleNav>
       </Navbar>
     );
   }