From 8d91abd3ae721069f792681f7edf1463740e85d3 Mon Sep 17 00:00:00 2001
From: Robert Marshall <rob@robware.uk>
Date: Sun, 15 Mar 2020 10:21:14 +0000
Subject: [PATCH] Put in adaptive layout for mobile. Introduce JavaScript free
 nav menu toggle.

---
 Website/Views/Shared/_Layout.cshtml | 14 +++++---
 Website/wwwroot/css/style.less      | 54 +++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/Website/Views/Shared/_Layout.cshtml b/Website/Views/Shared/_Layout.cshtml
index 3d42930..cc484ce 100644
--- a/Website/Views/Shared/_Layout.cshtml
+++ b/Website/Views/Shared/_Layout.cshtml
@@ -20,10 +20,16 @@
 		@RenderBody()
 	</main>
 	<nav>
-		@await Component.InvokeAsync("ProjectNavigation")
-		@await Component.InvokeAsync("BlogNavigation")
-		<iframe height='160' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/activity-summary/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
-		<iframe height='454' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/latest-rides/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
+		<label for="menu-toggle"><img class="nav-open" src="/images/menu.svg" /></label>
+		<input type="checkbox" id="menu-toggle" />
+		<div class="nav-container">
+			@await Component.InvokeAsync("ProjectNavigation")
+			@await Component.InvokeAsync("BlogNavigation")
+		</div>
+		<div class="strava">
+			<iframe height='160' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/activity-summary/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
+			<iframe height='454' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/latest-rides/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
+		</div>
 	</nav>
 </div>
 <footer>
diff --git a/Website/wwwroot/css/style.less b/Website/wwwroot/css/style.less
index 5e935e0..186fe0e 100644
--- a/Website/wwwroot/css/style.less
+++ b/Website/wwwroot/css/style.less
@@ -110,6 +110,10 @@ h1, h2, h3, h4, h5, h6 {
 		margin: 20px 0;
 		padding: 0 10px;
 
+		#menu-toggle {
+			display: none;
+		}
+
 		.nav-list{
 			list-style-type: none;
 			margin: 0;
@@ -164,3 +168,53 @@ form {
 }
 
 @import "blog.less";
+
+
+@media screen and (max-width: 992px) {
+	#content {
+		flex-direction: column-reverse;
+
+		main {
+			padding-top: 0;
+		}
+
+		nav {
+			flex: 1 1 auto;
+			border:none;
+			margin: 0;
+			padding: 30px;
+
+			.nav-open {
+				filter: invert(100%);
+				width: 32px;
+				height: 32px;
+			}
+
+			#menu-toggle:checked + .nav-container{
+				max-height: 1000px;
+				margin-top: 20px;
+				opacity: 1;
+			}
+
+			.nav-container{
+				max-height: 0;
+				overflow: hidden;
+				transition:all 0.5s ease-out;
+				opacity: 0;
+			}
+
+			.strava {
+				display: none;
+			}
+		}
+	}
+
+	.header{
+		&__headshot{
+			width: 40vw;
+			height: 40vw;
+			max-width: 200px;
+			max-height: 200px;
+		}
+	}
+}
\ No newline at end of file