diff --git a/common/app/components/Nav/Avatar-Nav-Item.jsx b/common/app/components/Nav/Avatar-Nav-Item.jsx new file mode 100644 index 0000000000..e01c9b4501 --- /dev/null +++ b/common/app/components/Nav/Avatar-Nav-Item.jsx @@ -0,0 +1,22 @@ +import React, { PropTypes } from 'react'; +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 AvatarNavItem({ picture }) { + return ( +
  • + + + +
  • + ); +} + +AvatarNavItem.propTypes = { picture: PropTypes.string }; diff --git a/common/app/components/Nav/Nav.jsx b/common/app/components/Nav/Nav.jsx index 7f255d1666..a3c60b4894 100644 --- a/common/app/components/Nav/Nav.jsx +++ b/common/app/components/Nav/Nav.jsx @@ -1,6 +1,5 @@ import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; -import { Link } from 'react-router'; import { LinkContainer } from 'react-router-bootstrap'; import { Col, @@ -12,6 +11,7 @@ import { import navLinks from './links.json'; import FCCNavItem from './NavItem.jsx'; +import AvatarNavItem from './Avatar-Nav-Item.jsx'; const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'; @@ -188,20 +188,7 @@ export default class extends React.Component { return null; } if (username) { - return ( -
  • - - - -
  • - ); + return ; } else { return ( { logoElement } - +