From bf7708f658cc6299a3b775afe24459b5a808c54d Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 21:20:54 +0200
Subject: Restructure component and container directories

---
 src/components/app/sidebars/Sidebar.js | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/app/sidebars/Sidebar.js

(limited to 'src/components/app/sidebars/Sidebar.js')

diff --git a/src/components/app/sidebars/Sidebar.js b/src/components/app/sidebars/Sidebar.js
new file mode 100644
index 00000000..00e3607a
--- /dev/null
+++ b/src/components/app/sidebars/Sidebar.js
@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+import "./Sidebar.css";
+
+class Sidebar extends React.Component {
+    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}
+                {collapseButton}
+            </div>
+        );
+    }
+}
+
+export default Sidebar;
-- 
cgit v1.2.3