You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

65 lines
1.4 KiB

import React from 'react'
import styled from 'styled-components'
// components
import CloseBtn from 'components/sideMenu/CloseBtn'
// lib
import * as styles from 'lib/styles/styles'
import zIndex from 'lib/styles/zIndex'
import palette from 'lib/styles/palette'
const Wrapper = ({ title, show, onClose, children }: Props, ref: any) => {
return (
<Container show={show} ref={ref}>
<Header>
<span>{title}</span>
<CloseBtn onClick={onClose} />
</Header>
{children}
</Container>
)
}
const Container = styled.div`
display: flex;
flex-direction: column;
position: fixed;
width: 340px;
height: 100vh;
top: 0;
right: 0;
z-index: ${zIndex.menu};
box-shadow: -4px 0 8px 0 rgba(0,0,0,.16);
background-color: ${palette.white};
border-radius: 16px 0 0 16px;
transform: ${({ show }: { show: boolean }) => show
? `translateX(0px) scale(1)`
: `translateX(420px) scale(.8)`
};
transition: .3s ${styles.transition};
overflow-y: auto;
${styles.scrollbar()};
`;
const Header = styled.div`
width: 100%;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30px;
& > span {
padding-left: 24px;
font-size: 21px;
font-weight: 600;
}
`;
interface Props {
title: string;
show: boolean;
onClose: () => void;
children?: React.ReactNode;
}
export default React.forwardRef(Wrapper)