(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens

(Feat): Menu should show username on sm screens

common/app/components/Nav/Avatar-Points-Nav-Item.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router';
 
 // this is separated out to prevent react bootstrap's
 // NavBar from injecting unknown props to the li component
-export default function AvatarPointsNavItem({ picture, points }) {
+export default function AvatarPointsNavItem({ picture, points, username }) {
   return (
     <li
       className='avatar-points'
@@ -11,7 +11,8 @@ export default function AvatarPointsNavItem({ picture, points }) {
       >
       <Link to='/settings'>
         <span className='brownie-points-nav'>
-          [ { points || 1 } ]
+          <span className='hidden-md hidden-lg'> { username } </span>
+          <span class='brownie-points'> [ { points || 1 } ] </span>
         </span>
         <span className='hidden-xs hidden-sm avatar'>
           <img
@@ -25,6 +26,7 @@ export default function AvatarPointsNavItem({ picture, points }) {
 }
 
 AvatarPointsNavItem.propTypes = {
+  username: PropTypes.string,
   picture: PropTypes.string,
-  points: React.PropTypes.number
+  points: PropTypes.number
 };

common/app/components/Nav/Nav.jsx

@@ -171,6 +171,7 @@ export default class extends React.Component {
         <AvatarPointsNavItem
           picture={ picture }
           points={ points }
+          username={ username }
         />
       );
     } else {

server/views/partials/navbar.jade

@@ -24,7 +24,9 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
                     a(href='/signup') Sign Up
             else
                 li.avatar-points
-                    a(href='/settings')
-                      span.brownie-points-nav [ #{user.points} ]
-                      span.hidden-xs.hidden-sm.avatar
-                        img.profile-picture.float-right(src='#{user.picture}')
+                  a(href='/settings')
+                    span.brownie-points-nav
+                      span.hidden-md.hidden-lg #{user.username} 
+                      span.brownie-points [ #{user.points} ]
+                    span.hidden-xs.hidden-sm.avatar
+                      img.profile-picture.float-right(src='#{user.picture}')