on making usernavigator

browser/main/HomeContainer/Components/ArticleNavigator.js

@@ -1,12 +1,61 @@
 import React, { PropTypes } from 'react'
 
-class ArticleNavigator extends React.Component {
+export default class ArticleNavigator extends React.Component {
   render () {
+    let { user } = this.props
+    if (user == null) return (<div className='ArticleNavigator'/>)
+    console.log(user)
+    let folders = user.Folders.map(folder => {
+      return (
+        <button key={'folder-' + folder.id}><i className='fa fa-fw fa-square'/> {folder.name}</button>
+      )
+    })
+
+    let members = Array.isArray(user.Members) ? user.Members.map(member => {
+      return (
+        <div>{member.profileName}</div>
+      )
+    }) : null
+
     return (
       <div className='ArticleNavigator'>
+        <div className='userInfo'>
+          <div className='userProfileName'>{user.profileName}</div>
+          <div className='userName'>{user.name}</div>
+          <i className='fa fa-fw fa-chevron-down'/>
+        </div>
+
+        <div className='controlSection'>
+          <button className='newPostBtn'>New Post</button>
+        </div>
+
+        <div className='folders'>
+          <div className='foldersHeader'>
+            <div className='folderTitle'>Folders</div>
+            <button className='addFolderBtn'><i className='fa fa-fw fa-plus'/></button>
+          </div>
+          <div className='folderList'>
+            <button>All folders</button>
+            {folders}
+          </div>
+        </div>
+
+        {user.userType === 'team' ? (
+          <div className='members'>
+            <div className='header'>
+              <div className='title'></div>
+            </div>
+            <div className='memberList'>
+              {members}
+            </div>
+          </div>
+        ) : null}
+
       </div>
     )
   }
 }
 
-export default ArticleNavigator
+ArticleNavigator.propTypes = {
+  user: PropTypes.object
+}