make navbar hide on scroll down on mobile

akisblack · Feb 17, 2023 · d67e34e · d67e34e
1 parent 7c6c4f4
commit d67e34e
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 27 deletions.
diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
@@ -1,7 +1,7 @@
 <div class="p-4 bg-secondary flex flex-col sm:flex-row sticky top-full mt-16">
 	<div class="flex items-center">
 		Made with <div class="i-simple-icons:svelte mx-1 text-[#FF3E00]" />
-		 SvelteKit
+		SvelteKit
 	</div>
 	<div class="flex">
 		<span class="mx-2 hidden sm:block">|</span>

diff --git a/src/lib/Nav/Nav.svelte b/src/lib/Nav/Nav.svelte
@@ -37,16 +37,44 @@
 
 	const linkContainerStyles =
 		"flex items-center gap-4 bg-secondary children:(no-underline text-grey)";
+
+	let nav: HTMLElement;
+
+	let lastScrollTop: number;
+
+	let scrollTop: number;
+
+	const handleScroll = () => {
+		if (!showMenu) {
+			if (scrollTop > lastScrollTop) {
+				nav.style.top = "-80px";
+			} else {
+				nav.style.top = "0";
+			}
+		}
+
+		lastScrollTop = scrollTop;
+	};
 </script>
 
-<svelte:window bind:innerWidth={width} />
+<svelte:window
+	bind:innerWidth={width}
+	bind:scrollY={scrollTop}
+	on:scroll={handleScroll}
+/>
 
-<nav class="{navStyles} sticky w-full top-0 z-50 js">
+<nav
+	class="{navStyles} sticky w-full top-0 z-50 js transition-top duration-200"
+	bind:this={nav}
+>
 	<!-- Slot for the progress bar -->
 	<slot />
 	<div class="flex items-center justify-between w-full">
 		<Logo />
-		<button on:click={() => (showMenu = !showMenu)} aria-label="Toggle menu">
+		<button
+			on:click={() => (showMenu = !showMenu)}
+			aria-label="Toggle menu"
+		>
 			<div
 				class="{showMenu
 					? 'i-ic:outline-close'

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -6,12 +6,24 @@
 	<span class="text-2xl"
 		>Web developer, Linux enthusiast and average Greek.</span
 	>
-	<div class="flex flex-row gap-2 text-2xl children:(transition-color duration-200)">
+	<div
+		class="flex flex-row gap-2 text-2xl children:(transition-color duration-200)"
+	>
 		<div class="i-simple-icons:svelte hover:text-[#FF3E00]" />
 		<div class="i-simple-icons:unocss hover:text-[#333333]" />
 		<div class="i-simple-icons:typescript hover:text-[#3178C6]" />
 		<div class="i-simple-icons:docker hover:text-[#2496ED]" />
-		<svg class="hover:text-[#22b638]" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 507 512"><path fill="currentColor" d="M250.898 93.57c123.335-4.267 111.02 88.098 109.058 180.206H155.953c-7.25-133.188 5.246-171.044 94.945-180.205zM90.338 273.777c-5.753-150.13 6.17-254.143 175.49-251.87c-159.202 11.96-156.661 144.062-153.825 251.87zM255.458 0C142.623 1.358 92.855 46.7 74.018 113.652c-12.465 44.308-9.794 100.902-8.592 160.124C6.666 289.276 3.636 318.338 0 355.99c10.912 19.142 22.905 36.292 35.736 51.636c-.403-94.258 17.008-95.015 79.651-96.638l244.569-.009v28.507l-240.838-.01c-62.261 3.34-58.2 18.674-58.095 95.047c142.714 134.57 363.584 79.377 445.031-54.963c4.352-59.256-12.566-100.876-59.914-105.783c4.332-113.12-1.3-157.507-18.911-190.431C396.765 26.393 334.46.403 255.459 0z"></path></svg>
+		<svg
+			class="hover:text-[#22b638]"
+			xmlns="http://www.w3.org/2000/svg"
+			width="1em"
+			height="1em"
+			viewBox="0 0 507 512"
+			><path
+				fill="currentColor"
+				d="M250.898 93.57c123.335-4.267 111.02 88.098 109.058 180.206H155.953c-7.25-133.188 5.246-171.044 94.945-180.205zM90.338 273.777c-5.753-150.13 6.17-254.143 175.49-251.87c-159.202 11.96-156.661 144.062-153.825 251.87zM255.458 0C142.623 1.358 92.855 46.7 74.018 113.652c-12.465 44.308-9.794 100.902-8.592 160.124C6.666 289.276 3.636 318.338 0 355.99c10.912 19.142 22.905 36.292 35.736 51.636c-.403-94.258 17.008-95.015 79.651-96.638l244.569-.009v28.507l-240.838-.01c-62.261 3.34-58.2 18.674-58.095 95.047c142.714 134.57 363.584 79.377 445.031-54.963c4.352-59.256-12.566-100.876-59.914-105.783c4.332-113.12-1.3-157.507-18.911-190.431C396.765 26.393 334.46.403 255.459 0z"
+			/></svg
+		>
 		<div class="i-simple-icons:git hover:text-[#F05032]" />
 		<div class="i-simple-icons:linux hover:text-[#FCC624]" />
 		<div class="i-simple-icons:mongodb hover:text-[#47A248]" />

diff --git a/src/routes/contact/+page.server.ts b/src/routes/contact/+page.server.ts
@@ -15,21 +15,25 @@ export const load = (() => {
 }) satisfies PageServerLoad;
 
 export const actions: Actions = {
-    default: async ({ request, getClientAddress, fetch }) => {
+	default: async ({ request, getClientAddress, fetch }) => {
 		const formData = await request.formData();
 
 		const formDataEntries = Object.fromEntries(formData.entries());
 
 		const Body = Joi.object({
 			name: Joi.string().required(),
 			email: Joi.string().email().required(),
-			message: Joi.string().required().custom((value, helpers) => {
-				if (value.split(" ").length > 500) {
-					return helpers.message({ custom: "Message is too long, please keep it under 500 words." });
-				}
+			message: Joi.string()
+				.required()
+				.custom((value, helpers) => {
+					if (value.split(" ").length > 500) {
+						return helpers.message({
+							custom: "Message is too long, please keep it under 500 words."
+						});
+					}
 
-				return value;
-			})
+					return value;
+				})
 		});
 
 		if (Body.validate(formDataEntries).error) {
@@ -44,11 +48,21 @@ export const actions: Actions = {
 					"Content-Type": "application/json"
 				},
 				body: JSON.stringify({
-					content: `**__New contact form submission__**\n\n**Name:** ${formData.get("name")}\n**Email:** ${formData.get("email")}\n**IP:** ${getClientAddress()}\n**Message:** ${formData.get("message")}`
+					content: `**__New contact form submission__**\n\n**Name:** ${formData.get(
+						"name"
+					)}\n**Email:** ${formData.get(
+						"email"
+					)}\n**IP:** ${getClientAddress()}\n**Message:** ${formData.get(
+						"message"
+					)}`
 				})
 			});
 
-			return { success: true, message: "Thanks for your message, I will reply as soon as possible." };
+			return {
+				success: true,
+				message:
+					"Thanks for your message, I will reply as soon as possible."
+			};
 		}
-    }
-};
+	}
+};
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
@@ -1,27 +1,42 @@
 <script lang="ts">
-import type { ActionData, PageServerData } from "./$types";
+	import type { ActionData, PageServerData } from "./$types";
 
-export let form: ActionData;
-export let data: PageServerData;
+	export let form: ActionData;
+	export let data: PageServerData;
 </script>
 
 <h1>{data.title}</h1>
 <p>{data.description}</p>
 
-<form method="POST" class="flex flex-col gap-5">
+<form
+	method="POST"
+	class="flex flex-col gap-5"
+>
 	<div>
 		<label for="name">Name</label>
-		<input type="text" name="name" placeholder="Name" />
+		<input
+			type="text"
+			name="name"
+			placeholder="Name"
+		/>
 	</div>
 
 	<div>
 		<label for="email">Email</label>
-		<input type="email" name="email" placeholder="[email protected]" />
+		<input
+			type="email"
+			name="email"
+			placeholder="[email protected]"
+		/>
 	</div>
 
 	<div>
 		<label for="message">Message</label>
-		<textarea name="message" placeholder="[...]" rows="5"></textarea>
+		<textarea
+			name="message"
+			placeholder="[...]"
+			rows="5"
+		/>
 	</div>
 
 	{#if form?.success}
@@ -32,7 +47,11 @@ export let data: PageServerData;
 		{form.message}
 	{/if}
 
-	<button type="submit" class="transition-filter duration-200 hover:brightness-75">Send message <div class="i-ic:outline-arrow-circle-right" /></button>
+	<button
+		type="submit"
+		class="transition-filter duration-200 hover:brightness-75"
+		>Send message <div class="i-ic:outline-arrow-circle-right" /></button
+	>
 </form>
 
 <style>
@@ -44,7 +63,9 @@ export let data: PageServerData;
 		@apply text-xl font-semibold;
 	}
 
-	form > div > input, form > div > textarea, form > button {
+	form > div > input,
+	form > div > textarea,
+	form > button {
 		@apply w-110 lt-sm\:w-70 px-2 py-1 bg-secondary rounded flex items-center gap-2 text-lg;
 	}
-</style>
+</style>