Moved navigation to its own component.

Author: ciscoheat

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
   import { initFlash } from 'sveltekit-flash-message/client';
   import { page } from '$app/stores';
   import { beforeNavigate } from '$app/navigation';
+  import Navigation from './Navigation.svelte';
 
   const flash = initFlash(page);
 
@@ -19,31 +20,7 @@
   <div style:background-color={bg} class="flash">{$flash.message}</div>
 {/if}
 
-<nav>
-  <a href="/">Start</a> |
-  <a href="/test">Test page</a> |
-  <a href="/crud">CRUD</a> |
-  <a href="/super-debug">SuperDebug</a> |
-  <a href="/nested">Nested</a> |
-  <a href="/multiple">Multiple</a> |
-  <br />
-  <a href="/multiple2">Multiple 2</a>
-  <a href="/snapshot">Snapshot</a> |
-  <a href="/dates">Dates</a> |
-  <a href="/reset">Reset</a> |
-  <a href="/url">URL</a> |
-  <a href="/tainted">Tainted</a> |
-  <a href="/proxies">Proxies</a>
-  <br />
-  <a href="/properly-nested">Properly nested</a>
-  <a href="/files">Files</a> |
-  <a href="/spa">SPA</a> |
-  <a href="/nested-validation">Client-side validation</a> |
-  <a href="/tests/rex">Side-effect validation</a>
-  <br />
-  <a href="/tests/superform-c">Side-effect 2</a> |
-  <a href="/tests/multiselect">Multi-select</a>
-</nav>
+<Navigation />
 
 <slot />
 
@@ -53,9 +30,4 @@
     color: white;
     border-radius: 3px;
   }
-
-  nav {
-    text-align: center;
-    margin-bottom: 12px;
-  }
 </style>

src/routes/Navigation.svelte

@@ -0,0 +1,33 @@
+<nav>
+  <a href="/">Start</a> |
+  <a href="/test">Test page</a> |
+  <a href="/crud">CRUD</a> |
+  <a href="/super-debug">SuperDebug</a> |
+  <a href="/nested">Nested</a> |
+  <a href="/multiple">Multiple</a> |
+  <br />
+  <a href="/multiple2">Multiple 2</a>
+  <a href="/snapshot">Snapshot</a> |
+  <a href="/dates">Dates</a> |
+  <a href="/reset">Reset</a> |
+  <a href="/url">URL</a> |
+  <a href="/tainted">Tainted</a> |
+  <a href="/proxies">Proxies</a>
+  <br />
+  <a href="/properly-nested">Properly nested</a>
+  <a href="/files">Files</a> |
+  <a href="/spa">SPA</a> |
+  <a href="/nested-validation">Client-side validation</a> |
+  <a href="/tests/rex">Side-effect validation</a>
+  <br />
+  <a href="/tests/superform-c">Side-effect 2</a> |
+  <a href="/tests/multiselect">Multi-select</a> |
+  <a href="/tests/spa-values-disappearing">SPA onUpdate</a>
+</nav>
+
+<style>
+  nav {
+    text-align: center;
+    margin-bottom: 12px;
+  }
+</style>