Add login hamburger menu

public/main.js

@@ -1,8 +1,17 @@
-var cols = document.querySelectorAll(".collapsible button");
+var toggle = document.querySelector(".nav-toggle");
+var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p");
+toggle.addEventListener("click", function() {
+  heroText.forEach((item) => {
+    item.classList.toggle("hidden");
+  });
+  document.querySelector("nav form.login").classList.toggle("active");
+  this.classList.toggle("toggled");
+});
+var cols = document.getElementsByClassName("collapsible");
 var i;
 for (i = 0; i < cols.length; i++) {
   cols[i].addEventListener("click", function() {
-    this.parentElement.classList.toggle("active");
+    this.classList.toggle("active");
   });
 }
 //# sourceMappingURL=main.js.map

resources/build.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-project=$HOME/projects/trendplays
+export project=$HOME/projects/trendplays
 
 watch() {
 	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss &
@@ -9,8 +9,7 @@ watch() {
 	$project/public/main.css &
 	pid="$pid $!"
 	trap "kill -TERM $pid" 0 1 2 15
-	find $project/resources/js -type f |
-		entr 'esbuild resources/js/main.js --sourcemap --outdir=public' &
+	find $project/resources/js -type f | entr -n esbuild --sourcemap --outdir=$project/public $project/resources/js/main.js &
 	pid="$pid $!"
 	trap "kill -TERM $pid" 0 1 2 15
 	wait

resources/js/main.js

@@ -1,15 +1,22 @@
+var toggle = document.querySelector(".nav-toggle")
+var heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
+
+toggle.addEventListener("click", function() {
+	heroText.forEach(item => {
+		item.classList.toggle("hidden")
+	})
+	document.querySelector("nav form.login").classList.toggle("active")
+	this.classList.toggle("toggled")
+	// this.src = "/images/close.svg"
+})
+
+//FAQ code
 var cols = document.getElementsByClassName("collapsible");
 var i;
 
 for (i = 0; i < cols.length; i++) {
 	cols[i].addEventListener("click", function() {
 		this.classList.toggle("active");
-		// var content = this.nextElementSibling;
-		// if (content.style.display === "block") {
-		// content.style.display = "none";
-		// } else {
-		// content.style.display = "block";
-		// }
 	});
 }
 

resources/scss/_vars.scss

@@ -49,6 +49,9 @@ $theme-colors: (
 	background-color: darkenColor($col);
 	}
   }
+
+// A linear gradient with the light color at the top left and dark color at
+// bottom right, that darkens on hover
 @mixin special-button($start, $end) {
 	font-family: "PatuaOne";
 	border: none;
@@ -62,6 +65,7 @@ $theme-colors: (
 	}
 }
 
+// A white button with a transparent background that becomes white and orange on hover
 @mixin transparent-button {
 	text-align: center;
 	font-size: 20px;
@@ -76,6 +80,7 @@ $theme-colors: (
 	}
 }
 
+// A button with a white background and specified accent color that reverses on hover
 @mixin brand-button($col) {
 	width: 10em;
 	height: 2.5em;;
@@ -97,3 +102,26 @@ $theme-colors: (
 	box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
 	transition: transform 0.2s;
 }
+
+@mixin hovering2 {
+	padding: 18px 9px;
+	border-radius: 4px;
+	background: white;
+	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+	transition: transform 0.2s;
+}
+
+@mixin hovering3 {
+	padding: 18px 9px;
+	border-radius: 4px;
+	background: white;
+	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+	transition: transform 0.2s;
+}
+@mixin hovering-light {
+	padding: 18px 9px;
+	border-radius: 4px;
+	background: white;
+	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+	transition: transform 0.2s;
+}

resources/scss/main.scss

@@ -85,11 +85,13 @@ nav h1 {
 
 nav #logo {
 	margin-right: 50px;
+	z-index: 2;
 }
 
 nav form {
 	display: flex;
 	flex-wrap: wrap;
+	margin-right: 20px;
 }
 
 nav form div {
@@ -104,12 +106,36 @@ nav form input,label {
 	opacity: 0.7;
 }
 
+nav .nav-toggle {
+	position: absolute;
+	right: 10px;
+	top: 5px;
+	display: none;
+	height: 40px;
+	width: 40px;
+	margin-left: auto;
+	background: url("/images/hamburger-menu.svg");
+	background-size: 100%;
+	background-size: cover;
+}
+
+nav .nav-toggle.toggled {
+	background: url("/images/close.svg");
+	width: 25px;
+	height: 25px;
+	background-size: 100%;
+	background-size: cover;
+	top: 10px;
+	right: 15px;
+}
+
 div.landing-hero {
 	top: 0;
 	height: 50em;
 	background-color: #ff4e00;
 	// background-image: linear-gradient(to right bottom, #ff4e00, #fc6200, #f87200, #f58100, #f18e00, #f19507, #f09c0f, #f0a317, #f3a620, #f6a927, #f8ad2e, #fbb034);
 	background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
+	z-index: 0;
 }
 
 div.hero-filter {
@@ -159,6 +185,10 @@ form.login {
 	color: white;
 }
 
+.cancel-icon {
+	width: 30px;
+}
+
 form.login input {
 	margin-left: 2px;
 	color: white;
@@ -356,6 +386,7 @@ section.benefits-info div {
 section.faq-info {
 	margin-bottom: 6em;
 	margin-top: 3em;
+	height: 30em;
 }
 
 .faq-info h2 {
@@ -432,29 +463,108 @@ footer a {
 	}
 }
 
+.hidden {
+	display: none;
+}
+
+div.toggle-area {
+	display: none;
+	overflow: hidden;
+	height: 0px;
+	width: 100%;
+	z-index: 1;
+	@include vars.hovering3;
+	// background-color: vars.getColor("light-grey");
+	margin-bottom: 2em;
+	position: absolute;
+	border-radius: 0;
+	padding: 0;
+}
+
+
+// Make small screens more usable
 @media (max-width: 720px) {
 	nav { display: block; }
 
 	nav form {
-		display: block;
+		// display: none;
 		width: 190px;
 		margin-left: auto;
 		margin-right: auto;
 		align-items: center;
+		margin-top: 5em;
+		opacity: 0;
+		transition: transform 0.3s;
+		transform: translateY(-50px);
+	}
+
+	nav form.active {
+		display: block;
+		transform: translateX(0%);
+		opacity: 1;
+		// background: white;
+		// color: black;
 	}
+
 	nav form div {
 		margin: 10px auto;
 	}
+
 	nav div label,input {
 		display: block;
 	}
 
+	nav .nav-toggle {
+		display: block;
+	}
+
+	div.toggle-area.active {
+		display: initial;
+	}
+
+	div.toggle-area h1 {
+		font-size: 1.5rem;
+		display: inline-block;
+		color: vars.getColor("brand-orange");
+	}
+
+	div.toggle-area h3 {
+		text-align: center;
+	}
+
+	div.toggle-area .login {
+		color: vars.getColor("brand-orange");
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		// margin-top: 1em;
+		width: 10em;
+		// top: 40px;
+		// position: absolute;
+	}
+
+	div.toggle-area .login input {
+		border: 2px solid black;
+		border-color: vars.getColor("brand-orange");
+		color: black;
+	}
+
+	div.toggle-area button {
+		margin-top: 1em;
+		width: 6em;
+	}
+
+	div.toggle-area div {
+		margin-top: 10px;
+		margin-bottom: 5px;
+	}
+
 	.landing-hero div.hero-filter h2 {
-		top: 30%;
+		top: 15%;
 	}
 
 	.landing-hero div.hero-filter p {
-		top: 45%;
+		top: 30%;
 	}
 
 	.landing-hero div.hero-filter .register-btn {

resources/views/home.blade.php

@@ -9,6 +9,26 @@
 
 @section('content')
 	@parent
+	<main>
+	<div class="toggle-area">
+		<a id='logo' href='/'>
+			<h1>Trendplays</h1>
+			<img src="/images/arrow-up.svg" height="30px" alt="">
+		</a>
+		<h3>Login</h3>
+		<form class="login" action="">
+			@csrf
+			<div>
+			<label for='sender_email'>Email</label>
+			<input required type='email' name='sender_email' placeholder=''
+spellcheck='false'>
+			</div>
+			<div>
+			<label for='sender_password'>Password</label>
+			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
+			</div>
+			<button class='login-btn'type="login">Log in</button>
+		</form></div>
 	<div class='landing-hero'>
 		<div class='hero-filter'>
 			<h2>The web's #1 content promoter</h2>
@@ -78,11 +98,15 @@
 	</div>
 <div class="info-cards">
 	<div class="info-card"><p>
-	Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis asperiores eius quos aliquid ex Rem rem quo facilis commodi.
+	Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis
+	in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis
+	asperiores eius quos aliquid ex Rem rem quo facilis commodi.
 	</p>
 </div>
 	<div class="info-card"><p>
-	Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam architecto dolorum sapiente facilis quos Aut quasi</p>
+	Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad
+	iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam
+	architecto dolorum sapiente facilis quos Aut quasi</p>
 </div>
 	<div class="info-card"><p>
 	Ipsum incidunt non illum mollitia omnis! Minima possimus eveniet autem non
@@ -162,6 +186,7 @@
 		</p></div></div>
 		</div>
 	</section>
+	</main>
 @endsection
 
 @section('scripts')

resources/views/master.blade.php

@@ -29,8 +29,8 @@ spellcheck='false'>
 			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
 			</div>
 			<button class='login-btn'type="login">Log in</button>
-			
 		</form>
+		<div class="nav-toggle"><div>
 			
 		@endguest
 			<span class="icon-bar"></span>