Page separation

src/assets/styles/VisionApp.scss

@@ -57,23 +57,6 @@
         .vision-module-selector {
             display: flex;
             flex-direction: row;
-
-            .styled-link {
-                display: flex;
-                min-width: 180px;
-                width: 180px;
-                border-right: 1px solid #a8d4e4;
-
-                .module-name {
-                    margin: auto 0 auto auto;
-                    color: white;
-                    padding: 0 12px;
-                }
-                .module-icon {
-                    margin: auto auto auto 0;
-                    color: #c8ae8a;
-                }
-            }
         }
     }
 }

src/assets/styles/componentstyles/SideNavBar.scss

@@ -0,0 +1,5 @@
+.side-navbar {
+    min-width: 180px;
+    width: 180px;
+    background: linear-gradient(to right, #152440, #152842);
+}

src/assets/styles/pagestyles/DataHound.scss

@@ -0,0 +1,12 @@
+.data-hound-module-container {
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - 60px);
+    width: 100vw;
+
+    .data-hound-info-center {
+        display: flex;
+        flex-direction: column;
+        width: calc(100vw - 180px);
+    }
+}

src/assets/styles/pagestyles/Parrot.scss

@@ -0,0 +1,12 @@
+.parrot-module-container {
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - 60px);
+    width: 100vw;
+
+    .parrot-info-center {
+        display: flex;
+        flex-direction: column;
+        width: calc(100vw - 180px);
+    }
+}

src/assets/styles/pagestyles/WatchDog.scss

@@ -0,0 +1,12 @@
+.watchdog-module-container {
+    display: flex;
+    flex-direction: row;
+    height: calc(100vh - 60px);
+    width: 100vw;
+
+    .watchdog-info-center {
+        display: flex;
+        flex-direction: column;
+        width: calc(100vw - 180px);
+    }
+}

src/components/datahound/StockChart.tsx

@@ -0,0 +1,27 @@
+import React, { Component } from "react";
+/* Imports */
+import * as am4core from "@amcharts/amcharts4/core";
+import * as am4charts from "@amcharts/amcharts4/charts";
+
+import am4themes_animated from "@amcharts/amcharts4/themes/animated";
+
+interface StockChartProps {}
+
+class StockChart extends Component<StockChartProps, {}> {
+    constructor(props: StockChartProps) {
+        super(props);
+    }
+
+    componentDidMount() {}
+
+    render() {
+        return (
+            <div className="stock-chart-container">
+                <div id="controls"></div>
+                <div id="stockchartdiv"></div>
+            </div>
+        );
+    }
+}
+
+export default StockChart;

src/components/links/ModuleLink.tsx

@@ -1,10 +1,17 @@
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 import React from "react";
 import { RouteEnum } from "../../common/enums";
 import { Icon } from "@material-ui/core";
 
-export const StyledModuleLink = styled(Link)`
+const styledModuleClassName = "styled-link";
+const moduleTextClassName = "module-name";
+const activeModuleClassName = "active-module";
+const moduleIconClassName = "module-icon";
+
+export const StyledModuleLink = styled(NavLink).attrs({
+    activeClassName: activeModuleClassName
+})`
     text-decoration: none;
 
     &:focus,
@@ -16,7 +23,42 @@ export const StyledModuleLink = styled(Link)`
         color: white;
         font-size: 18px;
     }
+
+    &.${styledModuleClassName} {
+        display: flex;
+        min-width: 180px;
+        width: 180px;
+        border-right: 1px solid #a8d4e4;
+
+        .${moduleTextClassName} {
+            margin: auto 0 auto auto;
+            padding: 0 12px;
+        }
+        .${moduleIconClassName} {
+            margin: auto auto auto 0;
+            color: #c8ae8a;
+        }
+    }
+
+    &.${activeModuleClassName} {
+        border-bottom: 6px solid #ff7831;
+        @media (prefers-reduced-motion: no-preference) {
+            .${moduleIconClassName} {
+                animation: active-module-logo-spin infinite 4s linear;
+            }
+        }
+
+        @keyframes active-module-logo-spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
 `;
+
 interface IModuleLink {
     children: string;
     to: RouteEnum;
@@ -25,9 +67,9 @@ interface IModuleLink {
 
 function ModuleLink({ children, to, icon }: IModuleLink) {
     return (
-        <StyledModuleLink className="styled-link" to={to}>
-            <div className="module-name">{children}</div>
-            <Icon className="module-icon">{icon}</Icon>
+        <StyledModuleLink className={styledModuleClassName} to={to} activeClassName={activeModuleClassName}>
+            <div className={moduleTextClassName}>{children}</div>
+            <Icon className={moduleIconClassName}>{icon}</Icon>
         </StyledModuleLink>
     );
 }

src/components/navbars/SideNavBar.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import "../../assets/styles/componentstyles/SideNavBar.scss";
+
+function SideNavBar() {
+    return <div className="side-navbar"></div>;
+}
+
+export default SideNavBar;

src/pages/DataHound.tsx

@@ -4,6 +4,9 @@ import * as am4core from "@amcharts/amcharts4/core";
 import * as am4charts from "@amcharts/amcharts4/charts";
 import am4themes_dark from "@amcharts/amcharts4/themes/dark";
 import am4themes_animated from "@amcharts/amcharts4/themes/animated";
+import "../assets/styles/pagestyles/DataHound.scss";
+import SideNavBar from "../components/navbars/SideNavBar";
+import StockChart from "../components/datahound/StockChart";
 
 interface ProxyAPIStats {
     status: string;
@@ -112,8 +115,12 @@ class DataHound extends Component<{}, ProxyManagerState> {
             });
         }
         return (
-            <div className="proxy-manager">
-                <div id="chartdiv" style={{ backgroundColor: "grey" }}></div>
+            <div className="data-hound-module-container">
+                <SideNavBar />
+                <div className="data-hound-info-center">
+                    <div id="chartdiv" style={{ backgroundColor: "grey" }}></div>
+                    <StockChart />
+                </div>
             </div>
         );
     }

src/pages/Parrot.tsx

@@ -1,10 +1,18 @@
 import React from "react";
 import UnderConstruction from "./UnderConstruction";
 import { UnderConstructionComponentType } from "../common/enums";
-import "../assets/styles/pagestyles/UnderConstruction.scss";
+import SideNavBar from "../components/navbars/SideNavBar";
+import "../assets/styles/pagestyles/Parrot.scss";
 
 function Parrot() {
-    return <UnderConstruction componentType={UnderConstructionComponentType.Page} componentName="Parrot" />;
+    return (
+        <div className="parrot-module-container">
+            <SideNavBar />
+            <div className="parrot-info-center">
+                <UnderConstruction componentType={UnderConstructionComponentType.Page} componentName="WatchDog" />
+            </div>
+        </div>
+    );
 }
 
 export default Parrot;

src/pages/UnderConstruction.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Icon } from "@material-ui/core";
 import { UnderConstructionComponentType } from "../common/enums";
+import "../assets/styles/pagestyles/UnderConstruction.scss";
 
 interface UCProps {
     componentType: UnderConstructionComponentType;

src/pages/WatchDog.tsx

@@ -1,9 +1,18 @@
 import React from "react";
 import UnderConstruction from "./UnderConstruction";
 import { UnderConstructionComponentType } from "../common/enums";
+import SideNavBar from "../components/navbars/SideNavBar";
+import "../assets/styles/pagestyles/WatchDog.scss";
 
 function WatchDog() {
-    return <UnderConstruction componentType={UnderConstructionComponentType.Page} componentName="WatchDog" />;
+    return (
+        <div className="watchdog-module-container">
+            <SideNavBar />
+            <div className="watchdog-info-center">
+                <UnderConstruction componentType={UnderConstructionComponentType.Page} componentName="WatchDog" />
+            </div>
+        </div>
+    );
 }
 
 export default WatchDog;