Initial changes for SidePanel

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Button, Icon } from '@ohif/ui';
+
+const baseStyle = {
+  maxWidth: '320px',
+};
+
+const dynamicStyle = {
+  open: {
+    left: {},
+    right: {},
+  },
+  closed: {
+    left: {},
+    right: {},
+  },
+};
+
+const sideClasses = {
+  left: 'border-r-1',
+  right: 'border-l-1',
+};
+
+const baseClassName =
+  'transition-all duration-300 ease-in-out h-100 bg-primary-light border-black';
+
+const SidePanel = ({
+  side,
+  className,
+  children,
+  defaultIsOpen,
+  componentName,
+  iconName,
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+
+  const style = Object.assign({}, isOpen ? openStyle : closedStyle, baseStyle);
+
+  return (
+    <div
+      className={classnames(className, baseClassName, sideClasses[side])}
+      style={style}
+    >
+      {isOpen ? (
+        <React.Fragment>
+          <div className="border-b-1">
+            {componentName}
+            <Button onClick={() => setIsOpen(false)}>
+              <Icon name="chevron-right" />
+            </Button>
+          </div>
+          {children}
+        </React.Fragment>
+      ) : (
+        <Button onClick={() => setIsOpen(true)}>
+          <div>
+            <Icon name={iconName} />
+            {componentName}
+          </div>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+SidePanel.defaultProps = {
+  defaultIsOpen: false,
+};
+
+SidePanel.propTypes = {
+  side: PropTypes.oneOf(['left', 'right']).isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  isOpen: PropTypes.bool,
+};
+
+export default SidePanel;

platform/ui/src/components/SidePanel/index.js

@@ -0,0 +1,2 @@
+import SidePanel from './SidePanel';
+export default SidePanel;

platform/ui/src/components/index.js

@@ -13,6 +13,7 @@ import InputText from './InputText';
 import Label from './Label';
 import NavBar from './NavBar';
 import Select from './Select';
+import SidePanel from './SidePanel';
 import Svg from './Svg';
 import StudyListExpandedRow from './StudyListExpandedRow';
 import StudyListPagination from './StudyListPagination';
@@ -41,6 +42,7 @@ export {
   Label,
   NavBar,
   Select,
+  SidePanel,
   Svg,
   StudyListExpandedRow,
   StudyListPagination,