From 57b9e6e25838176fa2e34fd48b7a8eb6978e5f5d Mon Sep 17 00:00:00 2001
From: Ax333l <main@axelen.xyz>
Date: Fri, 25 Nov 2022 21:05:25 +0100
Subject: [PATCH] fix: mobile navigation menu (#35)

---
 src/app.css                                   |   2 +-
 .../molecules/MobileDropdown.svelte           |  25 +++
 src/lib/components/molecules/NavHost.svelte   | 160 +++++++++++-------
 src/lib/utils.ts                              |  20 +++
 4 files changed, 147 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/components/molecules/MobileDropdown.svelte

diff --git a/src/app.css b/src/app.css
index e9302a6..fd14ad1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -24,7 +24,7 @@ body {
 
 html,
 body {
-    max-width: 100%;
+    max-width: 100vw;
 }
 
 .wrapper {
diff --git a/src/lib/components/molecules/MobileDropdown.svelte b/src/lib/components/molecules/MobileDropdown.svelte
new file mode 100644
index 0000000..625ba28
--- /dev/null
+++ b/src/lib/components/molecules/MobileDropdown.svelte
@@ -0,0 +1,25 @@
+<script>
+import { slide } from 'svelte/transition';
+</script>
+
+<div transition:slide>
+  <slot />
+</div>
+
+<style>
+  div {
+    position: fixed;
+    width: 100vw;
+    top: 75px;
+
+    z-index: 999;
+    /* background-color: var(--grey-six); guh @xafn */
+    background-color: hsla(220, 12%, 15%, 0.95);
+    border-style: solid;
+    border-color: var(--accent-color);
+
+    /* its rotated for some reason :skull: */
+    border-left: 0.5rem;
+    border-right: 0.5rem;
+  }
+</style>
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
index adaab83..b8e993d 100644
--- a/src/lib/components/molecules/NavHost.svelte
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -1,76 +1,105 @@
 <script lang="ts">
 	import Navigation from '../atoms/NavButton.svelte';
-	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import Button from '../atoms/Button.svelte';
+  import MobileDropdown from './MobileDropdown.svelte';
+  import { onMount } from 'svelte';
+  import RouterEvents from '../../../data/RouterEvents';
 
-	let menuBtn: HTMLElement;
 	let menuOpen = false;
-	onMount(() => {
-		menuBtn.addEventListener('click', () => {
-			if (!menuOpen) {
-				menuBtn.classList.add('open');
-				menuOpen = true;
-			} else {
-				menuBtn.classList.remove('open');
-				menuOpen = false;
-			}
-		});
-	});
+
+  onMount(() => {
+    return RouterEvents.subscribe(event => {
+      if (event.navigating) {
+        menuOpen = false;
+      }
+    });
+  });
 </script>
 
 <nav>
-	<div class="left-side">
-		<a href="/">
-			<div class="logo">
-				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-			</div>
-		</a>
-		<ul>
-			<Navigation href="/">Home</Navigation>
-			<Navigation href="/download">Download</Navigation>
-      <div hidden>
-        <!-- This is just temporary so the build doesn't fail -->
-			  <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
-      </div>
-			<Navigation href="/patches">Patches</Navigation>
-		</ul>
-	</div>
-	<ul>
-		<Navigation href="/contributors/">
-			<img src="/icons/contrib.svg" alt="Contributors"/>
-		</Navigation>
-		<Navigation href="/api-settings/">
-			<img src="/icons/settings.svg" alt="Settings"/>
-		</Navigation>
-	</ul>
-	<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
-		<div class="menu-btn__burger" />
-	</div>
+  <div class="navbar">
+	  <div class="left-side">
+		  <a href="/">
+			  <span class="logo">
+				  <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+			  </span>
+		  </a>
+
+		  <span class="desktop">
+			  <Navigation href="/">Home</Navigation>
+			  <Navigation href="/download">Download</Navigation>
+        <div hidden>
+          <!-- This is just temporary so the build doesn't fail -->
+			    <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
+        </div>
+			  <Navigation href="/patches">Patches</Navigation>
+		  </span>
+	  </div>
+
+    <div class="right-side">
+	    <span class="desktop">
+		    <Navigation href="/contributors/">
+			    <img src="/icons/contrib.svg" alt="Contributors"/>
+		    </Navigation>
+		    <Navigation href="/api-settings/">
+			    <img src="/icons/settings.svg" alt="Settings"/>
+		    </Navigation>
+	    </span>
+
+      <!-- Should probably be moved to its own component. -->
+	    <button class="menu-btn mobile" class:open={menuOpen} on:click={() => {menuOpen = !menuOpen}}>
+		    <span class="menu-btn__burger" />
+	    </button>
+    </div>
+  </div>
+
+  <div class="mobile">
+    {#if menuOpen}
+      <MobileDropdown>
+        <div class="mobile-menu">
+		      <Navigation href="/">Home</Navigation>
+		      <Navigation href="/download">Download</Navigation>
+		      <Navigation href="/patches">Patches</Navigation>
+		      <Navigation href="/contributors">Contributors</Navigation>
+		      <Navigation href="/api-settings">Settings</Navigation>
+        </div>
+      </MobileDropdown>
+    {/if}
+  </div>
 </nav>
 
 <style>
-	nav {
-		padding: 0 1rem 0 2rem;
-		top: 0;
-		position: fixed;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 70px;
-		width: 100%;
-		z-index: 999;
-		background-color: var(--grey-six);
-		backdrop-filter: blur(15px);
-		-webkit-backdrop-filter: blur(15px);
-	}
+  .navbar {
+	  padding: 0 1rem 0 2rem;
+	  top: 0;
+	  position: fixed;
+	  display: flex;
+	  align-items: center;
+	  justify-content: space-between;
+	  min-height: 70px;
+	  width: 100vw;
+	  z-index: 999;
+	  background-color: var(--grey-six);
+	  backdrop-filter: blur(15px);
+	  -webkit-backdrop-filter: blur(15px);
+  }
 
-	ul {
+	.desktop {
 		display: flex;
 		gap: 0.75rem;
 		align-items: center;
 	}
 
+  .mobile-menu {
+    display: block;
+    width: 80vw;
+    height: 100vh;
+    white-space: pre;
+    margin: 0 auto;
+    padding: 1ch 0;
+  }
+
 	a {
 		text-decoration: none;
 	}
@@ -98,15 +127,15 @@
 		height: 20px;
 	}
 
-	@media screen and (max-width: 768px) {
-		ul {
+	@media screen and (max-width: 600px) {
+		.desktop {
 			display: none;
 		}
 	}
 
 	/* Hamburger mmm yum */
-	@media screen and (min-width: 768px) {
-		.menu-btn {
+	@media screen and (min-width: 600px) {
+		.mobile {
 			display: none !important;
 		}
 	}
@@ -120,6 +149,16 @@
 		height: 60px;
 		cursor: pointer;
 		transition: all 0.5s var(--bezier-one);
+
+    /* We don't want it to look like a normal button. */
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    padding: 0;
 	}
 	.menu-btn__burger {
 		width: 25px;
@@ -127,6 +166,9 @@
 		border-radius: 50px;
 		background: var(--grey-five);
 		transition: all 0.5s var(--bezier-one);
+
+    display: flex;
+    flex-wrap: wrap;
 	}
 	.menu-btn__burger::before,
 	.menu-btn__burger::after {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8ac5bb5..bf988db 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -6,3 +6,23 @@ export function dev_log(part: string, ...args) {
     console.log(`[${part}]:`, ...args);
   }
 }
+
+// Use directive that makes an element dispatch an event when you click or tap outside of it.
+// Stolen from the svelte docs: https://svelte.dev/tutorial/actions
+export function click_outside(node: Element) {
+  const handle = (event: MouseEvent) => {
+    if (!node.contains(event.target)) {
+      node.dispatchEvent(new CustomEvent("click_outside"));
+    }
+  };
+
+  document.addEventListener("touchstart", handle, true);
+  document.addEventListener("click", handle, true);
+
+  return {
+    destroy() {
+      document.removeEventListener("touchstart", handle, true);
+      document.removeEventListener("click", handle, true);
+    },
+  };
+}