Change names for leftbar options

frontend/src/components/App.tsx

@@ -12,19 +12,19 @@ import {
 import StandardView from "./pages/StandardView";
 
 type MyState = {
-  isToggled: boolean;
+  toggledLeft: boolean;
 };
 
 class App extends React.Component<{}, MyState> {
   constructor(props: {}) {
     super(props);
-    this.state = { isToggled: false };
+    this.state = { toggledLeft: false };
   }
 
   toggleLeftBar(e: React.MouseEvent<HTMLElement>) {
     e.preventDefault();
     this.setState((state) => ({
-      isToggled: !state.isToggled,
+      toggledLeft: !state.toggledLeft,
     }));
   }
 
@@ -45,7 +45,7 @@ class App extends React.Component<{}, MyState> {
 
         <StandardView
           pages={horizontalBarPages}
-					isToggled={this.state.isToggled}
+					toggledLeft={this.state.toggledLeft}
 					onOverlayClick={(e) => this.toggleLeftBar(e)}
         />
 

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

@@ -4,8 +4,8 @@ import styles from "./style.module.scss"
 
 const LeftBar: React.FC = () => {
   return (
-    <div id={styles.sidebarWrapper}>
-      <p className={styles.sidebarStatus}>1 UPDATE</p>
+    <div id={styles.leftbarWrapper}>
+      <p className={styles.leftbarStatus}>1 UPDATE</p>
       <LeftBarTabGroup />
     </div>
   );

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

 @import "assets/scss/custom";
 
-#sidebarWrapper {
+#leftbarWrapper {
   position: fixed;
   left: 250px;
   width: 0;
@@ -18,13 +18,13 @@
 	z-index: 5000;
 }
 
-:global(#wrapper.toggled) #sidebarWrapper {
+:global(#wrapper.toggledLeft) #leftbarWrapper {
 	width: 250px;
 }
 
 
 @media (max-width: 992px) {
-  .sidebarStatus {
+  .leftbarStatus {
     margin-top: 30px;
     margin-left: 16px;
     margin-right: 16px;
@@ -40,7 +40,7 @@
 }
 
 @media (min-width: 992px) {
-  .sidebarStatus {
+  .leftbarStatus {
     margin-top: 30px;
     margin-left: 32px;
     margin-right: 32px;
@@ -52,11 +52,11 @@
     width: max-content;
 	}
 	
-	#sidebarWrapper {
+	#leftbarWrapper {
     width: 250px;
 	}
 	
-	:global(#wrapper.toggled) #sidebarWrapper{
+	:global(#wrapper.toggledLeft) #leftbarWrapper{
     width: 0;
   }
 }

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

@@ -9,13 +9,13 @@ interface StandardViewProps {
     name: string;
     path: string;
   }[];
-	isToggled: boolean;
+	toggledLeft: boolean;
   onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
 const StandardView: React.FC<StandardViewProps> = ({
   pages,
-	isToggled,
+	toggledLeft,
 	onOverlayClick,
 }: StandardViewProps) => {
   const topBarRoutes = pages.map(({ name, path }) => (
@@ -25,7 +25,7 @@ const StandardView: React.FC<StandardViewProps> = ({
   ));
 
   return (
-    <div id="wrapper" className={isToggled ? "toggled" : ""}>
+    <div id="wrapper" className={toggledLeft ? "toggledLeft" : ""}>
       <LeftBar />
 			<div id="sidenav-overlay" onClick={e => onOverlayClick(e)}></div>
       <Switch>

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

@@ -27,13 +27,13 @@
     padding-left: 250px;
   }
 
-  #wrapper.toggled {
+  #wrapper.toggledLeft {
     padding-left: 0;
   }
 }
 
 @media (max-width: 992px) {
-  #wrapper.toggled #sidenav-overlay {
+  #wrapper.toggledLeft #sidenav-overlay {
 		visibility:visible;
 		background-color: rgba(0, 0, 0, 0.3);
   }