Add basic right bar

frontend/src/components/App.tsx

@@ -11,23 +11,29 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import StandardView from "./pages/StandardView";
 
-type MyState = {
+type AppState = {
   toggledLeft: boolean;
+  toggledRight: boolean;
 };
 
-class App extends React.Component<{}, MyState> {
+class App extends React.Component<{}, AppState> {
   constructor(props: {}) {
     super(props);
-    this.state = { toggledLeft: false };
+    this.state = { toggledLeft: false, toggledRight: false };
   }
 
-  toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
-    e.preventDefault();
+  toggleLeftBar() {
     this.setState((state) => ({
       toggledLeft: !state.toggledLeft,
     }));
   }
 
+  toggleRightBar() {
+    this.setState((state) => ({
+      toggledRight: !state.toggledRight,
+    }));
+  }
+
   render() {
     const horizontalBarPages = [
       { name: "Home", path: "/home", icon: faHome },
@@ -40,13 +46,24 @@ class App extends React.Component<{}, MyState> {
       <>
         <TopBar
           pages={horizontalBarPages}
-          onIconClick={(e) => this.toggleLeftBar(e)}
+          onFavIconClick={(e) => {
+            e.preventDefault();
+            this.toggleLeftBar();
+          }}
+          onUserIconClick={(e) => {
+            e.preventDefault();
+            this.toggleRightBar();
+          }}
         />
 
         <StandardView
           pages={horizontalBarPages}
 					toggledLeft={this.state.toggledLeft}
-					onOverlayClick={(e) => this.toggleLeftBar(e)}
+          toggledRight={this.state.toggledRight}
+          onOverlayClick={(e) => {
+            e.preventDefault();
+            this.setState({ toggledLeft: false, toggledRight: false });
+          }}
         />
 
         <BottomBar pages={horizontalBarPages} />

frontend/src/components/organisms/RightBar/index.tsx

+import React from "react";
+import styles from "./style.module.scss"
+
+const RightBar: React.FC = () => {
+  return (
+    <div id={styles.rightbarWrapper}>
+      <p className={styles.rightbarStatus}>2020-08-05 15:08</p>
+    </div>
+  );
+};
+
+export default RightBar;

frontend/src/components/organisms/RightBar/style.module.scss

+@import "assets/scss/custom";
+
+#rightbarWrapper {
+  position: fixed;
+  right: 250px;
+  width: 0;
+  margin-right: -250px;
+  height: 100%;
+  margin-bottom: 61px;
+  overflow-y: auto;
+  background: #fff;
+  background: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+	transition: all 0.5s ease;
+	z-index: 5000;
+}
+
+:global(#wrapper.toggledRight) #rightbarWrapper {
+	width: 250px;
+}
+
+
+@media (max-width: 992px) {
+  .rightbarStatus {
+    margin-top: 30px;
+    margin-left: 16px;
+    margin-right: 16px;
+		margin-bottom: 0px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+    letter-spacing: 0;
+    position: absolute;
+    width: max-content;
+    text-transform: uppercase;
+  }
+}
+
+@media (min-width: 992px) {
+  .rightbarStatus {
+    margin-top: 30px;
+    margin-left: 32px;
+    margin-right: 32px;
+    margin-bottom: 0px;
+		font-size: 16px;
+		font-weight: 500;
+		text-align: right;
+    color: #000000;
+    letter-spacing: 0;
+    position: absolute;
+    width: max-content;
+	}
+	
+	#rightbarWrapper {
+    width: 250px;
+	}
+	
+	:global(#wrapper.toggledRight) #rightbarWrapper{
+    width: 0;
+  }
+}

frontend/src/components/organisms/TopBar/index.tsx

@@ -11,14 +11,15 @@ export interface TopBarProps {
     name: string;
     path: string;
   }[];
-  onIconClick: (event: React.MouseEvent<HTMLImageElement>) => void;
+	onFavIconClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onUserIconClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
+const TopBar: React.FC<TopBarProps> = ({ pages, onFavIconClick, onUserIconClick }: TopBarProps) => {
   return (
     <Navbar className={styles.navBar} sticky="top" expand="lg" variant="light">
       <Container fluid>
-        <NavBarBrand onClick={onIconClick} />
+        <NavBarBrand onClick={onFavIconClick} />
 
         <NavBarTabGroup pages={pages} />
 
@@ -27,7 +28,8 @@ const TopBar: React.FC<TopBarProps> = ({ pages, onIconClick }: TopBarProps) => {
           width="30"
           height="30"
           className="d-inline-block align-top"
-          alt="userPic"
+					alt="userPic"
+					onClick={onUserIconClick}
         />
       </Container>
     </Navbar>

frontend/src/components/pages/StandardView/index.tsx

@@ -2,21 +2,25 @@ import React from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import ExamplePage from "components/templates/ExamplePage";
 import LeftBar from "components/organisms/LeftBar";
-import "./style.scss"
+import "./style.scss";
+import RightBar from "components/organisms/RightBar";
+import classNames from "classnames";
 
 interface StandardViewProps {
   pages: {
     name: string;
     path: string;
   }[];
-	toggledLeft: boolean;
+  toggledLeft: boolean;
+  toggledRight: boolean;
   onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const StandardView: React.FC<StandardViewProps> = ({
   pages,
-	toggledLeft,
-	onOverlayClick,
+  toggledLeft,
+  toggledRight,
+  onOverlayClick,
 }: StandardViewProps) => {
   const topBarRoutes = pages.map(({ name, path }) => (
     <Route path={path} key={name}>
@@ -25,9 +29,16 @@ const StandardView: React.FC<StandardViewProps> = ({
   ));
 
   return (
-    <div id="wrapper" className={toggledLeft ? "toggledLeft" : ""}>
+    <div
+      id="wrapper"
+      className={classNames({
+        toggledLeft: toggledLeft,
+        toggledRight: toggledRight,
+      })}
+    >
       <LeftBar />
-			<div id="sidenav-overlay" onClick={e => onOverlayClick(e)}></div>
+      <RightBar />
+      <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
       <Switch>
         <Route exact path="/" render={() => <Redirect to="/modules" />} />
         {topBarRoutes}

frontend/src/components/pages/StandardView/style.scss

 #wrapper {
-  padding-left: 0;
+	padding-left: 0;
+	padding-right: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
@@ -24,15 +25,21 @@
 
 @media (min-width: 992px) {
   #wrapper {
-    padding-left: 250px;
+		padding-left: 250px;
+    padding-right: 250px;
   }
 
   #wrapper.toggledLeft {
     padding-left: 0;
+	}
+	
+	#wrapper.toggledRight {
+    padding-right: 0;
   }
 }
 
 @media (max-width: 992px) {
+	#wrapper.toggledRight #sidenav-overlay,
   #wrapper.toggledLeft #sidenav-overlay {
 		visibility:visible;
 		background-color: rgba(0, 0, 0, 0.3);