From 378e337e9fd1aa003e6d865aa2d48b7a534a5ff6 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Thu, 7 Jul 2022 09:39:47 +0200
Subject: [PATCH] mobile navbar, mobile landing page

---
 webapp/src/lib/components/index/tile.svelte   |  4 +-
 .../src/lib/components/navbar/NavBar.svelte   | 54 +++++++++++++++++--
 .../lib/components/navbar/NavBarLink.svelte   |  5 +-
 .../lib/components/navbar/ThemeToggle.svelte  |  2 +-
 webapp/src/routes/index.svelte                | 12 ++---
 5 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/webapp/src/lib/components/index/tile.svelte b/webapp/src/lib/components/index/tile.svelte
index 871faa8..7afa80b 100644
--- a/webapp/src/lib/components/index/tile.svelte
+++ b/webapp/src/lib/components/index/tile.svelte
@@ -1,8 +1,8 @@
-<div class="w-1/2 p-4">
+<div class="md:w-1/2 md:p-4">
 	<div class="text-2xl font-bold mb-4 text-center">
 		<slot name="title" />
 	</div>
-	<div class="prose-lg text-center text-zinc-700 dark:text-zinc-300">
+	<div class="prose md:prose-lg text-center text-zinc-700 dark:text-zinc-300">
 		<slot name="text" />
 	</div>
 </div>
diff --git a/webapp/src/lib/components/navbar/NavBar.svelte b/webapp/src/lib/components/navbar/NavBar.svelte
index 7c97d67..659b65d 100644
--- a/webapp/src/lib/components/navbar/NavBar.svelte
+++ b/webapp/src/lib/components/navbar/NavBar.svelte
@@ -1,22 +1,68 @@
-<div id="navbar" class="h-14 border-b border-zinc-200 dark:border-zinc-700 transition-colors">
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import FaBars from 'svelte-icons/fa/FaBars.svelte';
+	import { slide } from 'svelte/transition';
+
+	export let showMobileMenu = false;
+
+	const mediaQueryHandler = (e: MediaQueryListEvent) => {
+		if (!e.matches) {
+			showMobileMenu = false;
+		}
+	};
+
+	onMount(() => {
+		const mediaListener = window.matchMedia('(max-width: 767px)');
+		mediaListener.addEventListener('change', mediaQueryHandler);
+		return () => mediaListener.removeEventListener('change', mediaQueryHandler);
+	});
+</script>
+
+<div
+	id="navbar"
+	class="h-[65px] md:h-14 border-b border-zinc-200 dark:border-zinc-700 transition-colors"
+>
 	<div
 		id="navbar-content"
 		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center whitespace-nowrap"
 	>
 		<div id="navbar-left" class="flex gap-4">
 			<a href="/" class="self-center h-full pb-0.5">
-				<span id="name" class="self-center font-bold text-lg dark:text-white"
+				<span id="name" class="self-center font-bold text-2xl md:text-lg dark:text-white"
 					>📝 {import.meta.env.VITE_BRANDING}</span
 				>
 			</a>
-			<ul class="flex gap-4 content-center">
+			<ul class="hidden md:flex gap-4 content-center">
 				<slot name="left" />
 			</ul>
 		</div>
-		<div id="navbar-right" class="flex gap-8 flex">
+		<div id="navbar-right" class="hidden md:block flex gap-8 flex">
 			<ul class="flex gap-2.5 content-center">
 				<slot name="right" />
 			</ul>
 		</div>
+		<div class="md:hidden ml-6 cursor-pointer text-text-muted hover:text-text-normal w-6">
+			<button
+				aria-label="navigation menu"
+				on:click={() => (showMobileMenu = !showMobileMenu)}
+				class="flex flex-col justify-center"><FaBars /></button
+			>
+		</div>
 	</div>
 </div>
+
+{#if showMobileMenu}
+	<div
+		transition:slide
+		class="fixed top-[65px] w-full sm:w-72 sm:right-1
+		rounded-lg"
+	>
+		<div class="bg-zinc-200 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg">
+			<div on:click={() => (showMobileMenu = !showMobileMenu)} class="flex flex-col gap-0 text-xl">
+				<slot name="left" />
+				<slot name="right" />
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/webapp/src/lib/components/navbar/NavBarLink.svelte b/webapp/src/lib/components/navbar/NavBarLink.svelte
index 9a08d83..6890016 100644
--- a/webapp/src/lib/components/navbar/NavBarLink.svelte
+++ b/webapp/src/lib/components/navbar/NavBarLink.svelte
@@ -2,7 +2,10 @@
 	export let href: string = '/';
 </script>
 
-<a {href} class="self-center w-full h-full text-zinc-600 dark:text-zinc-400">
+<a
+	{href}
+	class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 border-b md:border-b-0 border-zinc-300"
+>
 	<div class="h-full flex flex-col justify-center">
 		<slot />
 	</div>
diff --git a/webapp/src/lib/components/navbar/ThemeToggle.svelte b/webapp/src/lib/components/navbar/ThemeToggle.svelte
index 61c020d..e9ccd32 100644
--- a/webapp/src/lib/components/navbar/ThemeToggle.svelte
+++ b/webapp/src/lib/components/navbar/ThemeToggle.svelte
@@ -11,7 +11,7 @@
 
 <button
 	on:click={onClick}
-	class="self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
+	class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
 >
 	<div class="h-full flex flex-col justify-center">
 		<span class="h-6 text-black dark:text-zinc-300">
diff --git a/webapp/src/routes/index.svelte b/webapp/src/routes/index.svelte
index 9c940b1..ce23eea 100644
--- a/webapp/src/routes/index.svelte
+++ b/webapp/src/routes/index.svelte
@@ -19,10 +19,10 @@
 
 <article class="mx-auto max-w-4xl text-zinc-900 dark:text-zinc-100">
 	<div class="space-y-6 pt-24 pb-32">
-		<h1 id="title" class="font-extrabold text-5xl text-center">
+		<h1 id="title" class="font-extrabold text-4xl md:text-5xl text-center">
 			Securely share your <span class="text-[#705dcf]">Obsidian</span> notes with one click.
 		</h1>
-		<p id="tagline" class="prose-2xl text-center text-zinc-700 dark:text-zinc-300">
+		<p id="tagline" class="prose-xl md:prose-2xl text-center text-zinc-700 dark:text-zinc-300">
 			Zero configuration. End-to-end encrypted. <br />No account needed.
 		</p>
 		<p id="install-button" class="text-center pt-2">
@@ -37,7 +37,7 @@
 
 	<hr class="border-zinc-200 dark:border-zinc-700 transition-colors" />
 
-	<div class="space-y-8 pt-24 pb-16">
+	<div class="space-y-8 pt-12 md:pt-24 md:pb-16">
 		<div class="flex flex-row gap-4 mx-auto justify-center">
 			<Tile>
 				<h2 slot="title">End-to-end encrypted</h2>
@@ -48,7 +48,7 @@
 					notes.
 				</p>
 			</Tile>
-			<img src="/encrypted.svg" alt="encrypted-art" class="w-80" />
+			<img src="/encrypted.svg" alt="encrypted-art" class="w-80 hidden md:block" />
 		</div>
 
 		<div class="flex flex-row gap-4 mx-auto justify-center flex-row-reverse">
@@ -60,7 +60,7 @@
 					your Markdown notes. No account is needed to use our service.
 				</p>
 			</Tile>
-			<img src="/zeroconfig.svg" alt="encrypted-art" class="w-80" />
+			<img src="/zeroconfig.svg" alt="encrypted-art" class="w-80 hidden md:block" />
 		</div>
 
 		<div class="flex flex-row gap-4 mx-auto justify-center">
@@ -75,7 +75,7 @@
 					> under the MIT license.
 				</p>
 			</Tile>
-			<img src="/opensource.svg" alt="encrypted-art" class="w-80" />
+			<img src="/opensource.svg" alt="encrypted-art" class="w-80 hidden md:block" />
 		</div>
 	</div>
 </article>