Add rough implementation of left bar

.vscode/settings.json

+{
+	"liveServer.settings.port": 5501
+}
\ No newline at end of file

frontend/src/components/App.tsx

@@ -11,6 +11,7 @@ import {
   faCalendarWeek,
   faChalkboardTeacher,
 } from "@fortawesome/free-solid-svg-icons";
+import LeftBar from "./organisms/LeftBar/LeftBar";
 
 const App: React.FC = () => {
   const horizontalBarPages = [
@@ -20,20 +21,23 @@ const App: React.FC = () => {
     { name: "Other", path: "/other", icon: faEllipsisH },
   ];
 
-  const topBarRoutes = horizontalBarPages.map(({ name, path }) => 
+  const topBarRoutes = horizontalBarPages.map(({ name, path }) => (
     <Route path={path} key={name}>
       <ExamplePage name={name} />
     </Route>
-  );
+  ));
 
   return (
     <>
-      <TopBar pages={horizontalBarPages}/>
-      <Switch>
-        <Route exact path="/" render={() => <Redirect to="/courses" />} />
-        {topBarRoutes}
-      </Switch>
-      <BottomBar  pages={horizontalBarPages}/>
+      <TopBar pages={horizontalBarPages} />
+      <div id="wrapper">
+				<LeftBar/>
+        <Switch>
+          <Route exact path="/" render={() => <Redirect to="/courses" />} />
+          {topBarRoutes}
+        </Switch>
+      </div>
+      <BottomBar pages={horizontalBarPages} />
     </>
   );
 };

frontend/src/components/organisms/BottomBar/BottomBar.tsx

@@ -4,14 +4,10 @@ import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import "./style.scss";
 import {
-  faBookOpen,
-  faEllipsisH,
-  faCalendarWeek,
-  faChalkboardTeacher,
   IconDefinition
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { NavLink, Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 export interface BottomBarProps {
   pages: {

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

+import React from "react";
+import "./style.scss";
+
+const LeftBar: React.FC = () => {
+  // TODO: change to using react components
+  return (
+    <div id="sidebar-wrapper">
+      <div>
+        <p className="sidebar-status">1 UPDATE</p>
+        <h1 className="exam-outline-heading">Sort</h1>
+      </div>
+      <div
+        className="btn-group-vertical"
+        role="group"
+        id="exam-outline-button-group"
+      >
+        <button className="btn btn-primary exam-outline-button" type="button">
+          Progress
+        </button>
+        <button
+          className="btn btn-primary exam-outline-button-a active"
+          type="button"
+        >
+          Course Title
+        </button>
+        <button className="btn btn-primary exam-outline-button" type="button">
+          Course Code
+        </button>
+        <button className="btn btn-primary exam-outline-button" type="button">
+          Term
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LeftBar;

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

+//TODO: tidy, change classNames away from examen, and make more modular
+#wrapper {
+  padding-left: 0;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+#sidebar-wrapper {
+  z-index: 1000;
+  position: fixed;
+  left: 250px;
+  width: 0;
+  height: 100%;
+  margin-left: -250px;
+  overflow-y: auto;
+  background: #fff;
+  background: #FFFFFF;
+  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+}
+
+.exam-outline-button {
+  margin-bottom: 10px;
+}
+
+.exam-outline-button-a {
+  margin-bottom: 10px;
+  border-radius: 8px;
+}
+
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active,#sidebar-wrapper .show > .btn-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #000;
+  border-radius: 5px;
+  text-align: left;
+  border-width: 0px;
+  height: 40px;
+}
+
+#sidebar-wrapper .btn-primary {
+  color: #000;
+  background: #F6F8FA;
+  font-size: 17px;
+  color: #000000;
+  letter-spacing: 0;
+  border-width: 0px;
+  height: 40px;
+  border-radius: 5px;
+  text-align: left;
+}
+
+#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,#sidebar-wrapper .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
+  border-radius: 5px;
+}
+
+#sidebar-wrapper .btn-group-vertical > .btn-group:not(:first-child) >#sidebar-wrapper .btn, .btn-group-vertical > .btn:not(:first-child) {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+#sidebar-wrapper .btn-primary:hover {
+  color: #000;
+  background-color: #e5e5e5;
+  border-color: #fff;
+}
+
+#wrapper.toggled {
+  padding-left: 250px;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+  width: 250px;
+}
+
+@media (max-width: 768px) {
+  .sidebar-status {
+    margin-top: 30px;
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-bottom: 0px;
+    font-size: 16px;
+    color: #000000;
+    letter-spacing: 0;
+		position: absolute;
+		width: max-content;
+  }
+
+  .exam-outline-heading {
+    font-size: 24px;
+    color: #000000;
+    text-align: left;
+    margin-top: 64px;
+    margin-left: 16px;
+    margin-right: 16px;
+		position: absolute;
+		width: max-content;
+    margin-bottom: 0px;
+  }
+
+  #exam-outline-button-group {
+    margin-top: 102px;
+    margin-left: 16px;
+    margin-right: 16px;
+    width: 218px;
+  }
+}
+
+@media (min-width:768px) {
+	#wrapper {
+    padding-left: 250px;
+	}
+	
+  #sidebar-wrapper {
+    width: 250px;
+	}
+	
+	.sidebar-status {
+    margin-top: 30px;
+    margin-left: 32px;
+    margin-right: 32px;
+    margin-bottom: 0px;
+    font-size: 16px;
+    color: #000000;
+    letter-spacing: 0;
+		position: absolute;
+		width: max-content;
+	}
+	
+	.exam-outline-heading {
+    font-size: 24px;
+    color: #000000;
+    text-align: left;
+    margin-top: 64px;
+    margin-left: 32px;
+    margin-right: 32px;
+		position: absolute;
+		width: max-content;
+    margin-bottom: 0px;
+	}
+	
+  #exam-outline-button-group {
+    margin-top: 102px;
+    margin-left: 32px;
+    margin-right: 32px;
+    width: 186px;
+	}
+	
+  #wrapper.toggled {
+    padding-left: 0;
+  }
+
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0;
+  }
+}
\ No newline at end of file

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

@@ -31,15 +31,27 @@ const TopBar: React.FC<TopBarProps> = ({ pages }: TopBarProps) => {
   return (
     <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
       <Container fluid>
-        <Navbar.Brand as={Link} to="/" className="brand-container">
+        <Navbar.Brand className="brand-container">
           <img
             src={logo}
             width="30"
             height="30"
             className="d-inline-block align-center brand-image"
             alt="React Bootstrap logo"
+            onClick={(e) => {
+							// TODO: change to using react states
+              e.preventDefault();
+              const wrapper = document.querySelector("#wrapper") || document.createElement("div");
+              if (wrapper.classList.contains("toggled")) {
+                wrapper.classList.remove("toggled");
+              } else {
+                wrapper.classList.add("toggled");
+              }
+            }}
           />{" "}
-          Scientia
+          <Link to="/" style={{ textDecoration: "none" }}>
+            Scientia
+          </Link>
         </Navbar.Brand>
 
         <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">

frontend/src/components/organisms/TopBar/style.scss

@@ -27,6 +27,9 @@
   margin: 0px;
 }
 
+.brand-container a{
+	color: #000;
+}
 //--------------------------------Page Buttons---------------------------------
 
 @media (min-width: 992px) {