Add shadow for sidebars on mobile

frontend/src/components/App.tsx

@@ -21,7 +21,7 @@ class App extends React.Component<{}, MyState> {
     this.state = { isToggled: false };
   }
 
-  handleIconClick(e: React.MouseEvent<HTMLImageElement>) {
+  toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
     e.preventDefault();
     this.setState((state) => ({
       isToggled: !state.isToggled,
@@ -40,12 +40,13 @@ class App extends React.Component<{}, MyState> {
       <>
         <TopBar
           pages={horizontalBarPages}
-          onIconClick={(e) => this.handleIconClick(e)}
+          onIconClick={(e) => this.toggleLeftBar(e)}
         />
 
         <StandardView
           pages={horizontalBarPages}
-          isToggled={this.state.isToggled}
+					isToggled={this.state.isToggled}
+					onOverlayClick={(e) => this.toggleLeftBar(e)}
         />
 
         <BottomBar pages={horizontalBarPages} />

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

@@ -14,11 +14,12 @@
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
+	transition: all 0.5s ease;
+	z-index: 5000;
 }
 
 :global(#wrapper.toggled) #sidebarWrapper {
-  width: 250px;
+	width: 250px;
 }
 
 

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

@@ -9,12 +9,14 @@ interface StandardViewProps {
     name: string;
     path: string;
   }[];
-  isToggled: boolean;
+	isToggled: boolean;
+  onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const StandardView: React.FC<StandardViewProps> = ({
   pages,
-  isToggled,
+	isToggled,
+	onOverlayClick,
 }: StandardViewProps) => {
   const topBarRoutes = pages.map(({ name, path }) => (
     <Route path={path} key={name}>
@@ -25,6 +27,7 @@ const StandardView: React.FC<StandardViewProps> = ({
   return (
     <div id="wrapper" className={isToggled ? "toggled" : ""}>
       <LeftBar />
+			<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

@@ -6,12 +6,35 @@
   transition: all 0.5s ease;
 }
 
+#sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: none;
+
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
 @media (min-width: 992px) {
   #wrapper {
     padding-left: 250px;
-	}
-	
+  }
+
   #wrapper.toggled {
     padding-left: 0;
   }
-}
+}
\ No newline at end of file
+
+@media (max-width: 992px) {
+  #wrapper.toggled #sidenav-overlay {
+    display: block;
+  }
+}