Show "Back to the editor" in nav on Account view page
This commit is contained in:
parent
eb4846c3c2
commit
4679d6a0bd
3 changed files with 34 additions and 6 deletions
|
@ -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;
|
||||
|
|
14
client/images/triangle-arrow-left.svg
Normal file
14
client/images/triangle-arrow-left.svg
Normal 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 |
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue