p5.js-web-editor/client/components/mobile/Sidebar.jsx

47 lines
1.1 KiB
React
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import styled from 'styled-components';
2020-08-07 19:09:17 +02:00
import { remSize, prop, common } from '../../theme';
import Header from './Header';
import IconButton from './IconButton';
import { ExitIcon } from '../../common/icons';
const SidebarWrapper = styled.div`
height: 100%;
width: ${remSize(180)};
position: fixed;
z-index: 2;
left: 0;
background: ${prop('backgroundColor')};
box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
`;
2020-08-07 19:09:17 +02:00
const Sidebar = ({ title, onPressClose, children }) => (
<SidebarWrapper>
{title &&
<Header slim title={title} fixed={false}>
<IconButton onClick={onPressClose} icon={ExitIcon} aria-label="Return to ide view" />
</Header>}
2020-08-07 19:09:17 +02:00
{children}
</SidebarWrapper>
);
Sidebar.propTypes = {
title: PropTypes.string,
2020-08-07 19:09:17 +02:00
onPressClose: PropTypes.func,
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
};
Sidebar.defaultProps = {
title: null,
2020-08-07 19:09:17 +02:00
children: [],
onPressClose: () => {}
};
export default Sidebar;