import PropTypes from 'prop-types';

import styled from 'styled-components';
import oc from 'open-color';

const Wrapper = styled.div`
  width: ${props => props.width};
  z-index: 1;

  background-color: ${oc.indigo[3]};
  border-right: 1px solid ${oc.indigo[4]};
  box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
`;

const Sidebar = ({ visible, width }) => visible ? (
  (<Wrapper width={width}> </Wrapper>)
) : null;

Sidebar.propTypes = {
  visible: PropTypes.bool,
  width: PropTypes.string
};

Sidebar.defaultProps = {
    visible: true,
    width: '16rem'
};

export default Sidebar;

@@ -70,16 +70,72 @@
 nents';%0A
+import %7B media, transitions%7D from '../lib/style-utils';%0A
 import o
@@ -184,16 +184,30 @@
 ed.div%60%0A
+  z-index: 1;%0A
   width:
@@ -214,42 +214,75 @@
  $%7Bp
-rops
  =%3E p
-rops.width%7D;%0A  z-index: 1
+.visible ? p.width : '0'%7D;%0A  transition: width .2s ease-in-out
 ;%0A%0A 
@@ -482,19 +482,8 @@
  =%3E 
-visible ? (
 %0A  (
@@ -490,16 +490,34 @@
 %3CWrapper
+ visible=%7Bvisible%7D
  width=%7B
@@ -539,18 +539,8 @@
 er%3E)
-%0A) : null;
 %0A%0ASi

update it