Use Nav with user menu in "dashboard" layout

Author: andrewn

client/components/Nav.jsx

@@ -217,6 +217,21 @@ class Nav extends React.PureComponent {
     this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10);
   }
 
+  renderDashboardMenu(navDropdownState) {
+    return (
+      <ul className="nav__items-left" title="project-menu">
+        <li className="nav__item-logo">
+          <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+        </li>
+        <li className="nav__item nav__item--no-icon">
+          <Link to="/">
+            <span className="nav__item-header">Editor</span>
+          </Link>
+        </li>
+      </ul>
+    );
+  }
+
   renderProjectMenu(navDropdownState) {
     return (
       <ul className="nav__items-left" title="project-menu">
@@ -607,6 +622,16 @@ class Nav extends React.PureComponent {
     return null;
   }
 
+  renderLeftLayout(navDropdownState) {
+    switch (this.props.layout) {
+      case 'dashboard':
+        return this.renderDashboardMenu(navDropdownState);
+      case 'project':
+      default:
+        return this.renderProjectMenu(navDropdownState);
+    }
+  }
+
   render() {
     const navDropdownState = {
       file: classNames({
@@ -630,10 +655,10 @@ class Nav extends React.PureComponent {
         'nav__item--open': this.state.dropdownOpen === 'account'
       })
     };
-  
+
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        {this.renderProjectMenu(navDropdownState)}
+        {this.renderLeftLayout(navDropdownState)}
         {this.renderUserMenu(navDropdownState)}
         {/*
         <div className="nav__announce">
@@ -685,15 +710,17 @@ Nav.propTypes = {
   stopSketch: PropTypes.func.isRequired,
   setAllAccessibleOutput: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
-  newFolder: PropTypes.func.isRequired
+  newFolder: PropTypes.func.isRequired,
+  layout: PropTypes.oneOf(['dashboard', 'project'])
 };
 
 Nav.defaultProps = {
   project: {
     id: undefined,
     owner: undefined
   },
-  cmController: {}
+  cmController: {},
+  layout: 'project'
 };
 
 function mapStateToProps(state) {

client/modules/User/pages/DashboardView.jsx

@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';
 
 import { updateSettings, initiateVerification, createApiKey, removeApiKey } from '../actions';
-import NavBasic from '../../../components/NavBasic';
+import Nav from '../../../components/Nav';
 
 import AssetList from '../../IDE/components/AssetList';
 import SketchList from '../../IDE/components/SketchList';
@@ -68,7 +68,7 @@ class DashboardView extends React.Component {
 
     return (
       <div className="dashboard">
-        <NavBasic onBack={this.closeAccountPage} />
+        <Nav layout="dashboard" />
 
         <section className="dashboard-header">
           <div className="dashboard-header__header">

client/styles/components/_nav.scss

@@ -43,7 +43,8 @@
   }
 }
 
-.nav__item:first-child {
+.nav__item:first-child,
+.nav__item--no-icon {
   padding-left: #{15 / $base-font-size}rem;
 }
 
@@ -179,4 +180,4 @@
       color: getThemifyVariable('button-hover-color');
     }
   }
-}
+}