src/lib/components/Router.svelte

@@ -0,0 +1,24 @@
+<script>
+    import { onMount } from 'svelte';
+    import { routes, fallback } from '../../utils/routes.js';
+    import { path } from '../../utils/stores.js';
+
+    const navigate = (to) => {
+      history.pushState({}, '', to);
+      path.set(to);
+    }
+
+    window.addEventListener('popstate', () => {
+      path.set(window.location.pathname);
+    });
+
+    let component;
+    const unsubscribe = path.subscribe(current => {
+      component = routes[current].component || fallback;
+    });
+
+    onMount(() => () => unsubscribe());
+
+  </script>
+
+  <svelte:component this={component} />

src/lib/pages/About.svelte

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

src/lib/pages/Donate.svelte

@@ -0,0 +1,2 @@
+<h1>Donate</h1>
+<p>Welcome to the donate page.</p>

src/lib/pages/Home.svelte

@@ -0,0 +1,2 @@
+<h1>Home</h1>
+<p>Welcome to the home page.</p>

src/lib/pages/NotFound.svelte

@@ -0,0 +1,2 @@
+<h1>404 - Not Found</h1>
+<p>Oops! That route does not exist.</p>

src/lib/sections/Header.svelte

@@ -2,6 +2,8 @@
   import MediaQuery from "../MediaQuery.svelte";
   import logo from "../../assets/logo.webp";
   import { t, locale, locales } from "../../i18n"
+  import { path } from '../../utils/stores.js';
+  import { routes } from '../../utils/routes.js';
 
   const configsFor = (matches) => {
     return matches
@@ -9,17 +11,20 @@
       : { src: logo, width: 150, height: 100 }; // desktop
   };
 
-  const navLinks = [
-    { name: () => $t("nav.home"), href: '/' },
-    { name: () => $t("nav.donate"), href: '/donate' },
-    { name: () => $t("nav.about"), href: '/about' },
-  ];
-
   const onSwitchToOppositeLang = () => {
     const oppositeLang = locales.find(item => item[0] !== $locale);
     locale.set(oppositeLang[0]);
   }
 
+  const onNavigateTo = (e, route) => {
+    e.preventDefault()
+    history.pushState({}, '', route);
+    path.set(route);
+    if (isMenuOpen) {
+      isMenuOpen = false
+    }
+  }
+
   let isMenuOpen = false;
 </script>
 
@@ -27,13 +32,12 @@
   <div class="logo">
     <MediaQuery query="(max-width: 768px)" let:matches>
       {@const configs = configsFor(matches)}
-          <a href="/">
+          <a href="#" on:click={(e) => onNavigateTo(e, "/")}>
            <img src={configs.src} alt="Embroidery viewer logo" width={configs.width} height={configs.height}/>
           </a>
     </MediaQuery>
   </div>
 
-
 <div class="nav-container">
   <MediaQuery query="(max-width: 768px)" let:matches >
     <slot let-matches>
@@ -46,8 +50,8 @@
   </MediaQuery>
   <nav class:is-open={isMenuOpen}>
     <ul>
-      {#each navLinks as link}
+      {#each Object.entries(routes) as [route, config]}
-        <li><a href={link.href}>{link.name()}</a></li>
+      <li><a href="#" on:click={(e) => onNavigateTo(e, route)} >{$t(config.nameKey)}</a></li>
       {/each}
     </ul>
   </nav>

src/lib/sections/Main.svelte

@@ -1,8 +1,10 @@
 <script>
     import FileViewer from "../components/FileViewer.svelte";
+    import Router from "../components/Router.svelte";
 </script>
 <main>
-    <FileViewer />
+    <!--<FileViewer />-->
+    <Router />
 </main>
 
 <style>

src/utils/routes.js

@@ -0,0 +1,21 @@
+import Home from '../lib/pages/Home.svelte';
+import About from '../lib/pages/About.svelte';
+import Donate from '../lib/pages/Donate.svelte';
+import NotFound from '../lib/pages/NotFound.svelte';
+
+export const routes = {
+  '/': {
+    component: Home,
+    nameKey: "nav.home"
+  },
+  '/about': {
+    component: About,
+    nameKey: "nav.about"
+  },
+  '/donate': {
+    component: Donate,
+    nameKey: "nav.donate"
+  }
+};
+
+export const fallback = NotFound;

src/utils/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const path = writable(window.location.pathname);