Change sidebar toggle logic into javascript

frontend/src/components/App.tsx

@@ -25,16 +25,14 @@ class App extends React.Component<{}, AppState> {
     let interfaceSize = localStorage.getItem("interfaceSize");
     if (interfaceSize) {
       document.documentElement.style.fontSize = `${interfaceSize}%`;
-    }
-  }
+		}
+		
+		window.addEventListener('resize', () => this.showOrHideSideBars());
+		this.showOrHideSideBars();
+	}
 
   toggleLeftBar() {
 		if (window.innerWidth <= 1024) {
-      this.setState({
-        toggledRight: true,
-			});
-    } 
-		if (window.innerWidth <= 992) {
       this.setState({
         toggledRight: false,
 			});
@@ -46,11 +44,6 @@ class App extends React.Component<{}, AppState> {
 
   toggleRightBar() {
 		if (window.innerWidth <= 1024) {
-      this.setState({
-        toggledLeft: true,
-			});
-    } 
-		if (window.innerWidth <= 992) {
       this.setState({
         toggledLeft: false,
 			});
@@ -60,6 +53,20 @@ class App extends React.Component<{}, AppState> {
     }));
   }
 
+	showOrHideSideBars(){
+		if (window.innerWidth <= 1024) {
+      this.setState({
+				toggledLeft: false,
+        toggledRight: false,
+			});
+		} else{
+			this.setState({
+				toggledLeft: true,
+        toggledRight: true,
+			});
+		}
+	}
+
   render() {
     const horizontalBarPages = [
       { name: "Dashboard", path: "/dashboard", icon: faHome },

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

@@ -56,12 +56,4 @@
     position: relative;
     width: max-content;
   }
-
-  #leftbarWrapper {
-    width: 15.625rem;
-  }
-
-  :global(#wrapper.toggledLeft) #leftbarWrapper {
-    width: 0;
-  }
 }

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

@@ -67,12 +67,4 @@
     width: max-content;
     text-transform: uppercase;
   }
-
-  #rightbarWrapper {
-    width: 15.625rem;
-  }
-
-  :global(#wrapper.toggledRight) #rightbarWrapper {
-    width: 0;
-  }
 }

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

@@ -53,7 +53,7 @@ const StandardView: React.FC<StandardViewProps> = ({
       </Switch>
 
       <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
-      <Container className={classNames("p-4", "pageContainer")}>
+      <Container className={classNames("px-4", "pageContainer")}>
         <Switch>
           <Route path="/dashboard">
             <ExamplePage name="Dashboard" />

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

@@ -26,16 +26,16 @@
 
 @media (min-width: 62rem) {
   #wrapper {
-		padding-left: 15.625rem;
-    padding-right: 15.625rem;
+		padding-left: 0;
+    padding-right: 0;
   }
 
   #wrapper.toggledLeft {
-    padding-left: 0;
+    padding-left: 15.625rem;
 	}
 	
 	#wrapper.toggledRight {
-    padding-right: 0;
+    padding-right: 15.625rem;
   }
 }