All files / components/layout/sidebar index.js

0% Statements 0/32
0% Branches 0/18
0% Functions 0/4
0% Lines 0/15
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                                                                                                                                                         
import React from 'react'
import PropTypes from 'prop-types'
import css from 'classnames'
 
import StyledSidebar from './sidebar.styled'
import SidebarContent from './sidebarContent.styled'
import SidebarBg from './sidebarBg.styled'
 
import { CloseFilter } from 'icons'
 
const Sidebar = (props) => {
  let _props = { ...props }
 
  if (props.fixed && !props.visible) { _props.visible = true }
  if (props.block && !props.visible) { _props.block = false }
 
  return (
    <div>
      <StyledSidebar offsetTop={_props.offsetTop} side={_props.side} float={_props.float} >
 
        <SidebarContent
          visible={_props.visible}
          background={_props.background}
          offsetTop={_props.offsetTop}
          width={_props.width}
          side={_props.side}
          float={_props.float}
          className={css({ 'visible': _props.visible }, 'sidebar-content')} >
          <div className={css({ 'hide': _props.fixed }, 'sidebar-close')} onClick={_props.triggerClose}>
            {
              _props.icon ||
              <CloseFilter />
            }
          </div>
          <div className='sidebar-content-wrapper'> {_props.children} </div>
        </SidebarContent>
 
        <SidebarBg
          className={css({ 'visible': _props.block }, 'sidebar-bg')}
          offsetTop={_props.offsetTop}
          width={_props.width}
          side={_props.side}
          transitionTime={_props.transitionTime}
          onClick={_props.triggerClose}
        />
 
      </StyledSidebar>
    </div>
  )
}
 
Sidebar.propTypes = {
  visible: PropTypes.bool,
  fixed: PropTypes.bool,
  block: PropTypes.bool,
  triggerClose: PropTypes.func,
  transitionTime: PropTypes.string,
  offsetTop: PropTypes.string,
  width: PropTypes.string,
  side: PropTypes.string,
  float: PropTypes.bool
}
 
Sidebar.defaultProps = {
  visible: false,
  fixed: false,
  block: false,
  float: false,
  triggerClose: () => { },
  transitionTime: '.2s',
  offsetTop: '0px',
  width: '196px',
  side: 'left'
}
 
export default Sidebar