64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ReactComponent as IconClose } from '../../icons/close-sm.svg';
|
|
import Button from '../Button';
|
|
|
|
export const ASIDE_WIDTH = 380;
|
|
|
|
export const Aside = ({ onClose, children }) => (
|
|
<aside className="call-aside">
|
|
<div className="inner">{children}</div>
|
|
<div className="close">
|
|
<Button
|
|
size="small-square"
|
|
variant="white"
|
|
className="closeButton"
|
|
onClick={onClose}
|
|
>
|
|
<IconClose />
|
|
</Button>
|
|
</div>
|
|
<style jsx>{`
|
|
.call-aside {
|
|
background: white;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: ${ASIDE_WIDTH}px;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
box-shadow: 0px 15px 35px rgba(18, 26, 36, 0.25);
|
|
color: var(--text-default);
|
|
}
|
|
|
|
.call-aside .inner {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
}
|
|
|
|
.call-aside .close {
|
|
position: absolute;
|
|
top: var(--spacing-xxs);
|
|
left: calc(-43px);
|
|
border-right: 1px solid var(--gray-wash);
|
|
z-index: 99;
|
|
}
|
|
|
|
.call-aside :global(.closeButton) {
|
|
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
|
height: 48px;
|
|
}
|
|
`}</style>
|
|
</aside>
|
|
);
|
|
|
|
Aside.propTypes = {
|
|
children: PropTypes.node,
|
|
onClose: PropTypes.func,
|
|
};
|
|
|
|
export default Aside;
|