Added dashboard page

app.js

@@ -80,6 +80,11 @@ async function main() {
 		}
 	}));
 
+	app.get('*', (req, res, next) => {
+		req.app.locals.layout = 'main';
+		next();
+	});
+
 	app.get('/admin/*', (req, res, next) => {
 		req.app.locals.layout = 'admin';
 		next();

routes/admin.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+	return res.redirect('/admin/dashboard');
+});
+
+router.get('/dashboard', (req, res) => {
+	return res.render('dashboard', {
+		title: 'Stratos - Dashboard'
+	});
+});
+
+
+module.exports = {
+	root: '/admin',
+	router: router
+};

src/stylesheets/components/_adminNav.scss

@@ -1,5 +1,5 @@
 .adminNav {
-	display: flex;
+	display: none;
 	flex-direction: column;
 	justify-content: space-between;
 	align-items: center;
@@ -11,8 +11,6 @@
 	padding: 3rem 0;
 	padding-top: 5rem;
 
-	display: none;
-
 	a {
 		color: white;
 	}
@@ -20,6 +18,7 @@
 	&__profile {
 		display: flex;
 		flex-direction: column;
+		padding-bottom: 4rem;
 
 		img {
 			border-radius: 100%;
@@ -36,6 +35,10 @@
 			align-self: flex-end;
 			text-decoration: underline;
 		}
+
+		@include respond-to('large') {
+			padding-bottom: 0;
+		}
 	}
 
 	&__items {

src/stylesheets/components/_mainNav.scss

@@ -5,8 +5,7 @@
 	padding: 0.5em 1em;
 
 	&__buttons {
-		display: grid;
+		display: flex;
-		grid-template-columns: repeat(2, 1fr);
 		align-items: center;
 		justify-items: end;
 		gap: 1em;

src/stylesheets/main.scss

@@ -19,3 +19,4 @@
 @import 'components/adminNavItem';
 
 @import 'pages/index';
+@import 'pages/dashboard';

src/stylesheets/pages/_dashboard.scss

@@ -0,0 +1,77 @@
+.adminContent {
+	min-height: 91vh;
+	background-color: #E5E5E5;
+	padding: .5rem 2rem 0 2rem;
+
+	.dashboard__item {
+		padding: .7rem;
+		background-color: white;
+		border-radius: 15px;
+	}
+
+	.dashboard__row {
+		margin: 1rem 0;
+
+		&:last-child {
+			margin-bottom: 0;
+			padding-bottom: 1rem;
+		}
+
+		h2 {
+			color: $text-colour;
+			font-weight: normal;
+			margin-left: .5rem;
+		}
+	}
+
+	.dashboard__table {
+		background-color: #E5E5E5;
+		padding: 1rem;
+		border-radius: 15px;
+
+		table {
+			width: 100%;
+
+		}
+
+		tr {
+			@include on-event() {
+				background-color: white;
+				cursor: pointer;
+			}
+		}
+
+		td {
+			padding: .5rem;
+
+			&:last-child {
+				width: 100%;
+			}
+		}
+	}
+
+	.dashboard__stats {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 1rem;
+
+		.dashboard__stat {
+			text-align: center;
+			padding: 1rem;
+
+			h2 {
+				color: $primary-colour;
+				margin: .75rem 0;
+				font-weight: bold;
+			}
+		}
+
+		@include respond-to('medium') {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+
+	@include respond-to('large') {
+		margin-left: 20vw;
+	}
+}

views/dashboard.hbs

@@ -0,0 +1,109 @@
+<section class='dashboard'>
+	<div class='dashboard__row dashboard__stats'>
+		<div class='dashboard__stat dashboard__item'>
+			<h2>5</h2>
+			<span>Classes</span>
+		</div>
+		<div class='dashboard__stat dashboard__item'>
+			<h2>11</h2>
+			<span>Completed Tests</span>
+		</div>
+		<div class='dashboard__stat dashboard__item'>
+			<h2>1</h2>
+			<span>Upcoming Test</span>
+		</div>
+		<div class='dashboard__stat dashboard__item'>
+			<h2>90%</h2>
+			<span>Pass Rate</span>
+		</div>
+	</div>
+	<div class='dashboard__row'>
+		<div class='dashboard__item'>
+			<h2>Recent Tests</h2>
+			<div class='dashboard__table'>
+				<table>
+					<tr data-id='1'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+					<tr data-id='2'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+					<tr data-id='3'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
+	<div class='dashboard__row'>
+		<div class='dashboard__item'>
+			<h2>Upcoming Tests</h2>
+			<div class='dashboard__table'>
+				<table>
+					<tr data-id='1'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+					<tr data-id='2'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+					<tr data-id='3'>
+						<td>
+							08/01/2022
+						</td>
+						<td>
+							Lagged homework 8
+						</td>
+					</tr>
+				</table>
+			</div>
+		</div>
+	</div>
+</section>
+
+<script>
+	const toggle = document.querySelector('.adminNav-toggle');
+	const nav = document.querySelector('.adminNav');
+
+	toggle.addEventListener('click', () => {
+		nav.style.display =
+			(nav.style.display === 'flex')
+				? 'none'
+				: 'flex';
+
+		toggle.classList.toggle('fa-bars');
+		toggle.classList.toggle('fa-close');
+	});
+
+	const tests = document.querySelectorAll('.dashboard__table tr');
+	tests.forEach(test => {
+		test.addEventListener('click', () => {
+			window.location.href =
+				`/tests/${test.getAttribute('data-id')}`;
+		});
+	});
+</script>