diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..b1e6aa6bf139a4d906870535e8853bbbf353dd13
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index d6dee65910c8be819aef0667f22add709cfa551a..c8e5593ca62113530331c68462f4dfd7e320ac10 100644
--- a/frontend/src/components/App.tsx
+++ b/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} />
</>
);
};
diff --git a/frontend/src/components/organisms/BottomBar/BottomBar.tsx b/frontend/src/components/organisms/BottomBar/BottomBar.tsx
index 5cbc61886b105f57f9b49b6878c78b737ea675a4..d7c29480f1fec06f2b7ea7ddd9f9223d918c1eef 100644
--- a/frontend/src/components/organisms/BottomBar/BottomBar.tsx
+++ b/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: {
diff --git a/frontend/src/components/organisms/LeftBar/LeftBar.tsx b/frontend/src/components/organisms/LeftBar/LeftBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f54d53eed356cd1ad2bde5feaeee38c21f64d2af
--- /dev/null
+++ b/frontend/src/components/organisms/LeftBar/LeftBar.tsx
@@ -0,0 +1,37 @@
+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;
diff --git a/frontend/src/components/organisms/LeftBar/style.scss b/frontend/src/components/organisms/LeftBar/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2fc82a12c074d354dbe7543e46d5b64216df19a3
--- /dev/null
+++ b/frontend/src/components/organisms/LeftBar/style.scss
@@ -0,0 +1,160 @@
+//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
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
index 50319370bf482bc77b2031b52d5e816a5874196e..32fd79b8026a67d28f5d28aee9fb39655c2f182e 100644
--- a/frontend/src/components/organisms/TopBar/TopBar.tsx
+++ b/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">
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
index 51d09cb7e07f923762ddf41c3f205df8be1b9984..9c58821f847ba30f476d0eaa2d1880dbf010f59a 100644
--- a/frontend/src/components/organisms/TopBar/style.scss
+++ b/frontend/src/components/organisms/TopBar/style.scss
@@ -27,6 +27,9 @@
margin: 0px;
}
+.brand-container a{
+ color: #000;
+}
//--------------------------------Page Buttons---------------------------------
@media (min-width: 992px) {