From 125051ccb1997294aa38314d91d10c20d4ed963b Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Wed, 11 Sep 2019 20:11:20 +0200
Subject: [PATCH] Use Nav with user menu in "dashboard" layout

---
 client/components/Nav.jsx                   | 35 ++++++++++++++++++---
 client/modules/User/pages/DashboardView.jsx |  4 +--
 client/styles/components/_nav.scss          |  5 +--
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 4fc0ea61..d6a7a742 100644
--- a/client/components/Nav.jsx
+++ b/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,7 +710,8 @@ 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 = {
@@ -693,7 +719,8 @@ Nav.defaultProps = {
     id: undefined,
     owner: undefined
   },
-  cmController: {}
+  cmController: {},
+  layout: 'project'
 };
 
 function mapStateToProps(state) {
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 49b162b6..af93db70 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/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">
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 74945c78..d58e54d0 100644
--- a/client/styles/components/_nav.scss
+++ b/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');
     }
   }
-}
\ No newline at end of file
+}