From 7fbfbbbf352ae4eaf0c3f23e80b4c45be4163539 Mon Sep 17 00:00:00 2001
From: DutchEllie <personal@quenten.nl>
Date: Sun, 10 Jul 2022 13:01:12 +0200
Subject: [PATCH] Add animation on navbar

---
 package-lock.json               | 11 +++++++++++
 package.json                    |  1 +
 src/components/misc/menu.svelte |  7 ++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6ab76c7..57e07d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "svelte-testing",
 			"version": "0.0.1",
 			"dependencies": {
+				"svelte-gestures": "^1.4.1",
 				"svelte-language-server": "^0.14.29"
 			},
 			"devDependencies": {
@@ -3183,6 +3184,11 @@
 				"svelte": "^3.24.0"
 			}
 		},
+		"node_modules/svelte-gestures": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
+			"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.14.12",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",
@@ -5951,6 +5957,11 @@
 				"typescript": "*"
 			}
 		},
+		"svelte-gestures": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
+			"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
+		},
 		"svelte-hmr": {
 			"version": "0.14.12",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",
diff --git a/package.json b/package.json
index 27303d9..c070929 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"svelte-gestures": "^1.4.1",
 		"svelte-language-server": "^0.14.29"
 	}
 }
diff --git a/src/components/misc/menu.svelte b/src/components/misc/menu.svelte
index 8d1b769..1667b36 100644
--- a/src/components/misc/menu.svelte
+++ b/src/components/misc/menu.svelte
@@ -1,4 +1,6 @@
 <script>
+	import {fly} from "svelte/transition";
+	import {swipe} from "svelte-gestures";
 	import Button from './navbutton.svelte';
 	export /**
 	 * @type {any}
@@ -11,7 +13,10 @@
 		on:click={() => {
 			open = !open;
 		}}
-		class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
+		transition:fly={{x: -600}}
+		class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16
+		{open ? "translate-x-0" : "-translate-x-full"}
+		"
 	>
 		<Button link="/" text="Home" />
 		<Button link="/about" text="About" />