From ed1d322bacfe87c184967293c2559ee799bb2f54 Mon Sep 17 00:00:00 2001
From: Robert Marshall <rob@robware.uk>
Date: Mon, 13 Apr 2020 08:03:42 +0100
Subject: [PATCH] Use fontawesome icon for menu

---
 src/Website/Views/Shared/_Layout.cshtml |  2 +-
 src/Website/wwwroot/css/style.scss      | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/Website/Views/Shared/_Layout.cshtml b/src/Website/Views/Shared/_Layout.cshtml
index 813cb56..8e76872 100644
--- a/src/Website/Views/Shared/_Layout.cshtml
+++ b/src/Website/Views/Shared/_Layout.cshtml
@@ -21,7 +21,7 @@
 		@RenderBody()
 	</main>
 	<nav>
-		<label for="menu-toggle"><img class="nav-open" src="/images/menu.svg" /></label>
+		<label for="menu-toggle"></label>
 		<input type="checkbox" id="menu-toggle" />
 		<div class="nav-container">
 			@await Component.InvokeAsync("BlogNavigation")
diff --git a/src/Website/wwwroot/css/style.scss b/src/Website/wwwroot/css/style.scss
index a559785..e7a3425 100644
--- a/src/Website/wwwroot/css/style.scss
+++ b/src/Website/wwwroot/css/style.scss
@@ -42,7 +42,6 @@ a {
 	color: $primary;
 	position: relative;
 	text-decoration: none;
-
 	background: linear-gradient(to bottom, $primary 0%, $primary 0%);
 	background-position: 0 100%;
 	background-size: 0px 0px;
@@ -154,9 +153,18 @@ h6 {
 		margin: 20px 0;
 		padding: 0 10px;
 
-		#menu-toggle,
+		#menu-toggle {
+			display: none;
+		}
+
 		[for="menu-toggle"] {
 			display: none;
+
+			&::after {
+				@extend .fas;
+				content: fa-content($fa-var-bars);
+				font-size: 32px;
+			}
 		}
 
 		.nav-list {
@@ -231,13 +239,7 @@ form {
 			margin: 0;
 			padding: 30px;
 
-			.nav-open {
-				filter: invert(100%);
-				width: 32px;
-				height: 32px;
-			}
-
-			#menu-toggle:checked+.nav-container {
+			#menu-toggle:checked + .nav-container {
 				max-height: 1000px;
 				margin-top: 20px;
 				opacity: 1;
@@ -274,4 +276,4 @@ form {
 			max-height: 200px;
 		}
 	}
-}
\ No newline at end of file
+}