@hbsis.uikit/react/src/components/layout/sider/index.js

Biblioteca ReactJS

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 }