Use Nav with user menu in "dashboard" layout

This commit is contained in:
Andrew Nicolaou 2019-09-11 20:11:20 +02:00
parent 611730c289
commit 125051ccb1
3 changed files with 36 additions and 8 deletions

View file

@ -217,6 +217,21 @@ class Nav extends React.PureComponent {
this.timer = setTimeout(this.setDropdown.bind(this, 'none'), 10); 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) { renderProjectMenu(navDropdownState) {
return ( return (
<ul className="nav__items-left" title="project-menu"> <ul className="nav__items-left" title="project-menu">
@ -607,6 +622,16 @@ class Nav extends React.PureComponent {
return null; return null;
} }
renderLeftLayout(navDropdownState) {
switch (this.props.layout) {
case 'dashboard':
return this.renderDashboardMenu(navDropdownState);
case 'project':
default:
return this.renderProjectMenu(navDropdownState);
}
}
render() { render() {
const navDropdownState = { const navDropdownState = {
file: classNames({ file: classNames({
@ -630,10 +655,10 @@ class Nav extends React.PureComponent {
'nav__item--open': this.state.dropdownOpen === 'account' 'nav__item--open': this.state.dropdownOpen === 'account'
}) })
}; };
return ( return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}> <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
{this.renderProjectMenu(navDropdownState)} {this.renderLeftLayout(navDropdownState)}
{this.renderUserMenu(navDropdownState)} {this.renderUserMenu(navDropdownState)}
{/* {/*
<div className="nav__announce"> <div className="nav__announce">
@ -685,7 +710,8 @@ Nav.propTypes = {
stopSketch: PropTypes.func.isRequired, stopSketch: PropTypes.func.isRequired,
setAllAccessibleOutput: PropTypes.func.isRequired, setAllAccessibleOutput: PropTypes.func.isRequired,
newFile: PropTypes.func.isRequired, newFile: PropTypes.func.isRequired,
newFolder: PropTypes.func.isRequired newFolder: PropTypes.func.isRequired,
layout: PropTypes.oneOf(['dashboard', 'project'])
}; };
Nav.defaultProps = { Nav.defaultProps = {
@ -693,7 +719,8 @@ Nav.defaultProps = {
id: undefined, id: undefined,
owner: undefined owner: undefined
}, },
cmController: {} cmController: {},
layout: 'project'
}; };
function mapStateToProps(state) { function mapStateToProps(state) {

View file

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

View file

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