BradNut/svelteKitForBeginners
1
0
Fork 0
mirror of https://github.com/BradNut/svelteKitForBeginners synced 2025-09-08 17:40:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding link prefetching to nav and page transition on main home content.

Browse source
This commit is contained in:
Bradley Shellnut 2022-04-13 14:44:22 -07:00
parent 4324a70a7a
commit 3f83a29883
3 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/navigation.svelte
View file

@ -13,25 +13,25 @@
<a href="/" class="logo">🐦️</a>
</li>
<li class:active={path === '/home'}>
<a href="/home">
<a href="/home" sveltekit:prefetch>
<Icon width="32" height="32" name="home" />
<span>Home</span>
</a>
</li>
<li class:active={path === '/home/profile/matia'}>
<a href="/home/profile/matia">
<a href="/home/profile/matia" sveltekit:prefetch>
<Icon width="32" height="32" name="profile" />
<span>Profile</span>
</a>
</li>
<li class:active={path === '/home/settings'}>
<a href="/home/settings">
<a href="/home/settings" sveltekit:prefetch>
<Icon width="32" height="32" name="settings" />
<span>Settings</span>
</a>
</li>
<li class:active={path === '/home/about'}>
<a href="/home/about">
<a href="/home/about" sveltekit:prefetch>
<Icon width="32" height="32" name="about" />
<span>About</span>
</a>

13
src/components/transition.svelte Normal file
View file

@ -0,0 +1,13 @@
<script lang="ts">
import { fly } from 'svelte/transition'
export let url: URL
</script>
{#key url}
<div
in:fly={{ y: -50, duration: 250, delay: 300 }}
out:fly={{ y: -50, duration: 250 }}
>
<slot />
</div>
{/key}

11
src/routes/home/__layout.svelte
View file

@ -1,14 +1,17 @@
<script lang="ts">
import Navigation from "$root/components/navigation.svelte";
import Trending from "$root/components/trending.svelte";
import { page } from '$app/stores'
import Navigation from "$root/components/navigation.svelte"
import Transition from '$root/components/transition.svelte';
import Trending from "$root/components/trending.svelte"
</script>
<div class="container">
<Navigation />
<main class="feed">
<slot />
<Transition url={$page.url}>
<slot />
</Transition>
</main>
<Trending />
</div>