From b0915552047607943a6d3997d1dc12ff7ff579e8 Mon Sep 17 00:00:00 2001
From: matt <matt@fiddaman.net>
Date: Fri, 4 Feb 2022 23:42:33 +0000
Subject: [PATCH] Added adminNav and adminNavItem components

---
 src/stylesheets/components/_adminNav.scss     | 53 +++++++++++++++++++
 src/stylesheets/components/_adminNavItem.scss | 16 ++++++
 src/stylesheets/main.scss                     |  2 +
 views/partials/adminNav.hbs                   | 15 ++++++
 views/partials/adminNavItem.hbs               |  4 ++
 5 files changed, 90 insertions(+)
 create mode 100644 src/stylesheets/components/_adminNav.scss
 create mode 100644 src/stylesheets/components/_adminNavItem.scss
 create mode 100644 views/partials/adminNav.hbs
 create mode 100644 views/partials/adminNavItem.hbs

diff --git a/src/stylesheets/components/_adminNav.scss b/src/stylesheets/components/_adminNav.scss
new file mode 100644
index 0000000..7fc7efa
--- /dev/null
+++ b/src/stylesheets/components/_adminNav.scss
@@ -0,0 +1,53 @@
+.adminNav {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	top: 0;
+	width: 100vw;
+	height: 82vh;
+	background-color: $primary-colour;
+	padding: 3rem 0;
+	padding-top: 5rem;
+
+	display: none;
+
+	a {
+		color: white;
+	}
+
+	&__profile {
+		display: flex;
+		flex-direction: column;
+
+		img {
+			border-radius: 100%;
+		}
+
+		.details {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+			color: white;
+		}
+
+		.logout {
+			align-self: flex-end;
+			text-decoration: underline;
+		}
+	}
+
+	&__items {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	@include respond-to('large') {
+		display: flex;
+		width: 20vw;
+		height: 87vh;
+	}
+}
diff --git a/src/stylesheets/components/_adminNavItem.scss b/src/stylesheets/components/_adminNavItem.scss
new file mode 100644
index 0000000..371cccd
--- /dev/null
+++ b/src/stylesheets/components/_adminNavItem.scss
@@ -0,0 +1,16 @@
+.adminNav__item {
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	padding: 2rem 0;
+	border-bottom: 1px solid white;
+	width: 70%;
+
+	&:last-child {
+		border: none;
+	}
+
+	@include on-event() {
+		background-color: $primary-colour-dark;
+	}
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index b9ca5c0..e0f0fec 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -15,5 +15,7 @@
 @import 'components/mainPageHeader';
 @import 'components/mainForm';
 @import 'components/adminHeader';
+@import 'components/adminNav';
+@import 'components/adminNavItem';
 
 @import 'pages/index';
diff --git a/views/partials/adminNav.hbs b/views/partials/adminNav.hbs
new file mode 100644
index 0000000..14d6eb0
--- /dev/null
+++ b/views/partials/adminNav.hbs
@@ -0,0 +1,15 @@
+<nav class='adminNav'>
+	<div class='adminNav__items'>
+		{{> adminNavItem content='Dashboard' icon='gauge' to='dashboard' }}
+		{{> adminNavItem content='Classes' icon='chalkboard-user' to='classes' }}
+		{{> adminNavItem content='Tests' icon='book-open' to='tests' }}
+		{{> adminNavItem content='Reports' icon='chart-column' to='reports' }}
+	</div>
+	<div class='adminNav__profile'>
+		<div class='details'>
+			<img src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpwco.com.sg%2Fwp-content%2Fuploads%2F2020%2F05%2FGeneric-Profile-Placeholder-v3.png&f=1&nofb=1' style='width: 50px;'/>
+			<span>Matthew Fiddaman</span>
+		</div>
+		<a class='logout' href='/logout'><i class='fa-solid fa-arrow-right-from-bracket'></i>Logout</a>
+	</div>
+</nav>
diff --git a/views/partials/adminNavItem.hbs b/views/partials/adminNavItem.hbs
new file mode 100644
index 0000000..3f72d6f
--- /dev/null
+++ b/views/partials/adminNavItem.hbs
@@ -0,0 +1,4 @@
+<a href='/admin/{{ to }}' class='adminNav__item'>
+	<i class='fa-solid fa-{{ icon}}'></i>
+	<span>{{content}}</span>
+</a>