Add conditional topology sidebar

4 files changed, 67 insertions, 0 deletions

diff --git a/src/components/sidebars/BuildingSidebarContent.js b/src/components/sidebars/BuildingSidebarContent.js
new file mode 100644
index 00000000..44688bb8
--- /dev/null
+++ b/src/components/sidebars/BuildingSidebarContent.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const BuildingSidebarContent = () => {
+    return (
+        <p>Test</p>
+    );
+};
+
+export default BuildingSidebarContent;
diff --git a/src/components/sidebars/Sidebar.js b/src/components/sidebars/Sidebar.js
new file mode 100644
index 00000000..be957956
--- /dev/null
+++ b/src/components/sidebars/Sidebar.js
@@ -0,0 +1,11 @@
+import classNames from "classnames";
+import React from "react";
+import "./Sidebar.css";
+
+const Sidebar = ({isRight, children}) => (
+    <div className={classNames("sidebar p-3", {"sidebar-right": isRight})}>
+        {children}
+    </div>
+);
+
+export default Sidebar;
diff --git a/src/components/sidebars/Sidebar.sass b/src/components/sidebars/Sidebar.sass
new file mode 100644
index 00000000..79ea3c27
--- /dev/null
+++ b/src/components/sidebars/Sidebar.sass
@@ -0,0 +1,20 @@
+@import ../../style-globals/_variables.sass
+
+.sidebar
+  position: absolute
+  top: 0
+  left: 0
+  width: 300px
+  height: 100%
+
+  z-index: 100
+  background: white
+
+  border-right: $gray-semi-dark 1px solid
+
+.sidebar-right
+  left: auto
+  right: 0
+
+  border-left: $gray-semi-dark 1px solid
+  border-right: none
diff --git a/src/components/sidebars/TopologySidebarComponent.js b/src/components/sidebars/TopologySidebarComponent.js
new file mode 100644
index 00000000..371463d1
--- /dev/null
+++ b/src/components/sidebars/TopologySidebarComponent.js
@@ -0,0 +1,27 @@
+import React from "react";
+import BuildingSidebarContent from "./BuildingSidebarContent";
+import Sidebar from "./Sidebar";
+
+const TopologySidebarComponent = ({interactionLevel}) => {
+    let sidebarHeading;
+    let sidebarContent;
+
+    switch (interactionLevel.mode) {
+        case "BUILDING":
+            sidebarHeading = "Building";
+            sidebarContent = <BuildingSidebarContent/>;
+            break;
+        default:
+            sidebarHeading = "Error";
+            sidebarContent = "Missing Content";
+    }
+
+    return (
+        <Sidebar isRight={true}>
+            <h3>{sidebarHeading}</h3>
+            {sidebarContent}
+        </Sidebar>
+    );
+};
+
+export default TopologySidebarComponent;