Add a router and some temporary pages

front/src/App.svelte

@@ -1,9 +1,45 @@
 <script>
+    import Router from 'svelte-spa-router';
+    import { replace, link, location } from 'svelte-spa-router';
+    import active from 'svelte-spa-router/active'
+    import routes from './routes';
+
+    let oldLocation = undefined;
+    let showNavBar = false;
+
+    function routeLoading(event) {
+        if (event.detail.location === oldLocation) {
+            return; // not an actual change
+        }
+        showNavBar = event.detail.userData.showNavBar;
+        oldLocation = event.detail.location;
+    }
+
+    function conditionFailure(event) {
+        replace("/");
+    }
 </script>
 
-<main>
-    <h1>TastyBites</h1>
-</main>
+{#if showNavBar }
+    <nav>
+        <p>TastyBites</p>
+        <ul>
+            <li><a href="/" use:link use:active>Home</a></li>
+            <li><a href="/contact" use:link use:active>Contact Us</a></li>
+            <li><a href="/cart" use:link use:active>Shopping Cart</a></li>
+        </ul>
+        <p>Location: {$location}</p>
+    </nav>
+{/if}
+<Router
+    {routes}
+    restoreScrollState={true}
+    on:routeLoading={routeLoading}
+    on:conditionsFailed={conditionFailure}
+/>
+<footer>
+    <p>TastyBites is a fake restaurant</p>
+</footer>
 
 <style>
 </style>

front/src/routes.js

@@ -0,0 +1,25 @@
+import { wrap } from "svelte-spa-router/wrap";
+import PageLoading from "./routes/PageLoading.svelte";
+
+const routes = {
+    "/": wrap({
+        asyncComponent: () => import("./routes/PageIndex.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+    "/contact": wrap({
+        asyncComponent: () => import("./routes/PageContact.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+    "/cart": wrap({
+        asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
+        loadingComponent: PageLoading,
+        conditions: [],
+        userData: { showNavBar: true },
+    }),
+}
+
+export default routes;

front/src/routes/PageContact.svelte

@@ -0,0 +1,2 @@
+<h1>Contact us</h1>
+<p>Nuh uh</p>

front/src/routes/PageIndex.svelte

@@ -0,0 +1,2 @@
+<h1>TastyBites reeeee</h1>
+<p>aurgh</p>

front/src/routes/PageLoading.svelte

@@ -0,0 +1 @@
+<p>Loading</p>

front/src/routes/PageShoppingCart.svelte

@@ -0,0 +1,2 @@
+<h1>Shopping Cart</h1>
+<p>Empty....</p>