navigating

Author: Rich Harris

content/tutorial/03-sveltekit/07-stores/02-navigating-store/README.md

@@ -2,4 +2,34 @@
 title: navigating
 ---
 
-> Coming soon
+The `navigating` store represents the current navigation. When a navigation starts — because of a link click, or a back/forward navigation, or a programmatic `goto` — the value of `navigation` will become an object with the following properties:
+
+- `from` and `to` — objects with `params`, `route` and `url` properties
+- `type` — the type of navigation, e.g. `link`, `popstate` or `goto`
+
+> For complete type information visit the [`Navigation`](https://kit.svelte.dev/docs/types#public-types-navigation) documentation.
+
+It can be used to show a loading indicator for long-running navigations. In this exercise, `src/routes/+page.server.js` and `src/routes/about/+page.server.js` both have an artificial delay. Inside `src/routes/+layout.svelte`, import the `navigating` store and add a message to the nav bar:
+
+```svelte
+/// file: src/routes/+layout.svelte
+<script>
+	import { page, +++navigating+++ } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+
++++	{#if $navigating}
+		navigating to {$navigating.to.url.pathname}
+	{/if}+++
+</nav>
+
+<slot />
+```

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-a/src/routes/+layout.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+</nav>
+
+<slot />

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-a/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+export async function load() {
+	return new Promise((fulfil) => {
+		setTimeout(fulfil, 1000);
+	});
+}

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-a/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>home</h1>
+<p>this is the home page.</p>

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-a/src/routes/about/+page.server.js

@@ -0,0 +1,5 @@
+export async function load() {
+	return new Promise((fulfil) => {
+		setTimeout(fulfil, 1000);
+	});
+}

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-a/src/routes/about/+page.svelte

@@ -0,0 +1,2 @@
+<h1>about</h1>
+<p>this is the about page.</p>

content/tutorial/03-sveltekit/07-stores/02-navigating-store/app-b/src/routes/+layout.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { page, navigating } from '$app/stores';
+</script>
+
+<nav>
+	<a href="/" aria-current={$page.url.pathname === '/'}>
+		home
+	</a>
+
+	<a href="/about" aria-current={$page.url.pathname === '/about'}>
+		about
+	</a>
+
+	{#if $navigating}
+		navigating to {$navigating.to.url.pathname}
+	{/if}
+</nav>
+
+<slot />