All files / components/layout/sider index.js

0% Statements 0/17
0% Branches 0/8
0% Functions 0/5
0% Lines 0/7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37                                                                         
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 }