diff options
| -rw-r--r-- | src/routes/+layout.server.ts | 4 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 35 |
2 files changed, 35 insertions, 4 deletions
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 9f05cf68..a32ab92a 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -1,5 +1,5 @@ -export const load = ({ locals }) => { +export const load = ({ locals, url }) => { const { user } = locals; - return { user }; + return { user, url: url.pathname }; }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 87bcbabe..e1df9c9d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,4 +1,4 @@ -<script> +<script lang="ts"> import { env } from '$env/dynamic/public'; import { userIdentity as getUserIdentity } from '$lib/AniList/identity'; import { onMount } from 'svelte'; @@ -7,6 +7,9 @@ import { browser } from '$app/environment'; import HeadTitle from '$lib/HeadTitle.svelte'; import '../app.css'; + import { fly } from 'svelte/transition'; + import { readable, type Readable } from 'svelte/store'; + import { navigating } from '$app/stores'; export let data; @@ -15,6 +18,23 @@ id: -1, avatar: 'https://s4.anilist.co/file/anilistcdn/user/avatar/large/default.png' }; + const navigationOrder = ['/', '/completed', '/schedule', '/updates', '/tools', '/settings']; + const previousPage: Readable<string | null> = readable(null, (set) => { + const unsubscribe = navigating.subscribe(($navigating) => { + if ($navigating && $navigating.from) set($navigating.from.url.pathname as unknown as null); + }); + + return () => unsubscribe(); + }); + const animationDelay = 100; + + $: way = data.url.includes('/user') + ? 200 + : $previousPage && $previousPage.includes('/user') + ? -200 + : navigationOrder.indexOf(data.url) > navigationOrder.indexOf($previousPage ?? '/') + ? 200 + : -200; onMount(async () => { if (browser && localStorage.getItem('redirect')) { @@ -79,7 +99,18 @@ <p /> - <slot /> + {#key data.url} + <div + in:fly={{ + x: way, + duration: animationDelay, + delay: animationDelay + }} + out:fly={{ x: -way, duration: animationDelay }} + > + <slot /> + </div> + {/key} </div> <style> |