Show "Back to the editor" in nav on Account view page

This commit is contained in:
Andrew Nicolaou 2019-06-04 14:58:13 +02:00 committed by Cassie Tarakajian
parent eb4846c3c2
commit 4679d6a0bd
3 changed files with 34 additions and 6 deletions

View File

@ -1,10 +1,15 @@
import PropTypes from 'prop-types';
import React from 'react';
import InlineSVG from 'react-inlinesvg';
const logoUrl = require('../images/p5js-logo-small.svg');
const arrowUrl = require('../images/triangle-arrow-left.svg');
class NavBasic extends React.PureComponent {
static defaultProps = {
onBack: null
}
render() {
return (
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
@ -12,12 +17,24 @@ class NavBasic extends React.PureComponent {
<li className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</li>
{ this.props.onBack && (
<li className="nav__item">
<button onClick={this.props.onBack}>
<span className="nav__item-header">
<InlineSVG src={arrowUrl} alt="Left arrow" />
</span>
Back to the editor
</button>
</li>)
}
</ul>
</nav>
);
}
}
NavBasic.propTypes = {};
NavBasic.propTypes = {
onBack: PropTypes.func,
};
export default NavBasic;

View File

@ -0,0 +1,14 @@
<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Left Arrow</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 665 B

View File

@ -42,15 +42,12 @@ class AccountView extends React.Component {
<title>p5.js Web Editor | Account</title>
</Helmet>
<NavBasic />
<NavBasic onBack={this.closeAccountPage} />
<section className="modal">
<div className="modal-content">
<div className="modal__header">
<h2 className="modal__title">My Account</h2>
<button className="modal__exit-button" onClick={this.closeAccountPage}>
<InlineSVG src={exitUrl} alt="Close Account Page" />
</button>
</div>
<Tabs className="account__tabs">
<TabList>