From cd281a0d7d0aba8fc4f7dce7b486e3adee1340de Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 20 Nov 2022 15:13:13 +0100
Subject: [PATCH] feat: add transitions

---
 frontend/src/lib/components/PageTransition.svelte | 14 ++++++++++++++
 frontend/src/routes/+layout.js                    |  6 ++++++
 frontend/src/routes/+layout.svelte                | 10 +++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/components/PageTransition.svelte
 create mode 100644 frontend/src/routes/+layout.js

diff --git a/frontend/src/lib/components/PageTransition.svelte b/frontend/src/lib/components/PageTransition.svelte
new file mode 100644
index 0000000..4f7de6e
--- /dev/null
+++ b/frontend/src/lib/components/PageTransition.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { fly } from 'svelte/transition';
+	export let url = '';
+</script>
+
+{#key url}
+	<div
+		in:fly={{ x: -5, duration: 500, delay: 500 }}
+		out:fly={{ x: 5, duration: 500 }}
+		class="absolute bg-inherit w-full"
+	>
+		<slot />
+	</div>
+{/key}
diff --git a/frontend/src/routes/+layout.js b/frontend/src/routes/+layout.js
new file mode 100644
index 0000000..25b03d3
--- /dev/null
+++ b/frontend/src/routes/+layout.js
@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export const load = async ({ url }) => {
+	return {
+		url: url.pathname
+	};
+};
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 9c092a1..ec662d8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+	import PageTransition from '$lib/components/PageTransition.svelte';
+
+	export let data: { url: string };
+</script>
+
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link
@@ -5,7 +11,9 @@
 	rel="stylesheet"
 />
 
-<slot />
+<PageTransition url={data.url}>
+	<slot />
+</PageTransition>
 
 <style windi:preflights:global windi:safelist:global>
 	:global(html) {