Use Nav with user menu in "dashboard" layout
This commit is contained in:
parent
611730c289
commit
125051ccb1
3 changed files with 36 additions and 8 deletions
|
@ -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) {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue