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
|