1 files changed, 53 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
new file mode 100644
index 00000000..f7368f54
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/Sidebar.js
@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import React from 'react'
+import './Sidebar.sass'
+
+class Sidebar extends React.Component {
+    static propTypes = {
+        isRight: PropTypes.bool.isRequired,
+        collapsible: PropTypes.bool,
+    }
+
+    static defaultProps = {
+        collapsible: true,
+    }
+
+    state = {
+        collapsed: false,
+    }
+
+    render() {
+        const collapseButton = (
+            <div
+                className={classNames('sidebar-collapse-button', {
+                    'sidebar-collapse-button-right': this.props.isRight,
+                })}
+                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
+            >
+                {(this.state.collapsed && this.props.isRight) || (!this.state.collapsed && !this.props.isRight) ? (
+                    <span className="fa fa-angle-left" title={this.props.isRight ? 'Expand' : 'Collapse'} />
+                ) : (
+                    <span className="fa fa-angle-right" title={this.props.isRight ? 'Collapse' : 'Expand'} />
+                )}
+            </div>
+        )
+
+        if (this.state.collapsed) {
+            return collapseButton
+        }
+        return (
+            <div
+                className={classNames('sidebar p-3 h-100', {
+                    'sidebar-right': this.props.isRight,
+                })}
+                onWheel={(e) => e.stopPropagation()}
+            >
+                {this.props.children}
+                {this.props.collapsible && collapseButton}
+            </div>
+        )
+    }
+}
+
+export default Sidebar