import React from 'react'
import styled from 'styled-components'
const SiderStyled = styled.div`
position: relative;
width: 0px;
min-width: 0px;
height: 100%;
overflow: hidden;
top: 0;
bottom: 0;
z-index: 1;
background-color: #314056;
transition: min-width 300ms ease;
transition-delay: 150ms;
-webkit-perspective: 1000;
${p => p.visible && 'min-width: 196px;'}
.sider-body {
transition: visibility 0s linear 300ms, opacity 0.33s linear;
visibility: hidden;
opacity: 0;
${p => p.visible && `
visibility: visible;
opacity: 1;
`}
}
`
const Sider = ({ visible, children }) => (
<SiderStyled visible={visible}>
<div className='sider-body'>{children}</div>
</SiderStyled>
)
export { Sider }
|