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> <a href="/" class="logo">🐦️</a>
</li> </li>
<li class:active={path === '/home'}> <li class:active={path === '/home'}>
<a href="/home"> <a href="/home" sveltekit:prefetch>
<Icon width="32" height="32" name="home" /> <Icon width="32" height="32" name="home" />
<span>Home</span> <span>Home</span>
</a> </a>
</li> </li>
<li class:active={path === '/home/profile/matia'}> <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" /> <Icon width="32" height="32" name="profile" />
<span>Profile</span> <span>Profile</span>
</a> </a>
</li> </li>
<li class:active={path === '/home/settings'}> <li class:active={path === '/home/settings'}>
<a href="/home/settings"> <a href="/home/settings" sveltekit:prefetch>
<Icon width="32" height="32" name="settings" /> <Icon width="32" height="32" name="settings" />
<span>Settings</span> <span>Settings</span>
</a> </a>
</li> </li>
<li class:active={path === '/home/about'}> <li class:active={path === '/home/about'}>
<a href="/home/about"> <a href="/home/about" sveltekit:prefetch>
<Icon width="32" height="32" name="about" /> <Icon width="32" height="32" name="about" />
<span>About</span> <span>About</span>
</a> </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}

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

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