summaryrefslogtreecommitdiff
path: root/frontend/src/components/app/sidebars/Sidebar.js
diff options
context:
space:
mode:
authorGeorgios Andreadis <info@gandreadis.com>2020-06-29 15:47:09 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2020-08-24 16:08:41 +0200
commit90fae26aa4bd0e0eb3272ff6e6524060e9004fbb (patch)
treebf6943882f5fa5f3114c01fc571503c79ee1056d /frontend/src/components/app/sidebars/Sidebar.js
parent7032a007d4431f5a0c4c5e2d3f3bd20462d49950 (diff)
Prepare frontend repository for monorepo
This change prepares the frontend Git repository for the monorepo residing at https://github.com/atlarge-research.com/opendc. To accomodate for this, we move all files into a frontend subdirectory.
Diffstat (limited to 'frontend/src/components/app/sidebars/Sidebar.js')
-rw-r--r--frontend/src/components/app/sidebars/Sidebar.js50
1 files changed, 50 insertions, 0 deletions
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
new file mode 100644
index 00000000..33dbe011
--- /dev/null
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -0,0 +1,50 @@
+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;