added router to svelte

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/App.svelte

@@ -2,6 +2,14 @@
     import { onMount } from 'svelte';
     import { loadTranslation } from './translations.svelte.js';
     import { user } from './user.svelte.js';
+    import { Router, Route } from 'svelte-tiny-router';
+    import About    from "./routes/About.svelte";
+    import Footer   from "./Components/Footer.svelte";
+    import Home     from "./routes/Home.svelte";
+    import Login    from "./Components/Login.svelte";
+    import Menu     from "./Components/Menu.svelte";
+    import User     from "./routes/User.svelte";
+
 
     let translations_ready = false;
     onMount(async () => {
@@ -9,20 +17,24 @@
         translations_ready = true;
     });
 
-    import Footer   from "./Components/Footer.svelte";
-    import Homepage from "./Components/Homepage.svelte";
-    import Login    from "./Components/Login.svelte";
-    import Menu     from "./Components/Menu.svelte";
 </script>
 
 {#if translations_ready }
-    <Menu />
     {#if user.name }
-        <Homepage />
+        <Router>
+            <Menu />
+            <Route path="/" component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/user/:id" component={User} />
+            <Route>
+                <p>Page not found</p>
+            </Route>
+        </Router>
     {:else}
         <Login />
     {/if}
     <Footer />
 {:else}
     <p>Loading translations...</p>
-{/if}
+{/if}
+

frontend/src/Components/Menu.svelte

@@ -1,15 +1,24 @@
 <script>
+    import { useTinyRouter } from 'svelte-tiny-router';
     import { t } from '../translations.svelte.js';
     import { user } from '../user.svelte.js';
 
+    const router = useTinyRouter();
+
+    function gotoAbout(){
+        router.navigate('/about');
+    }
+
     function logout(){
         user.name = null;
     }
 </script>
 <nav>
-    <a href="/">{t('nav.Home')}</a>
+    <a on:click={() => router.navigate('/')}>{t('nav.Home')}</a>
+    <a on:click={gotoAbout}>{t('nav.About')}</a>
+    <a on:click={() => router.navigate('/user/5')}>{t('nav.User5')}</a>
     <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('nav.Tutorial')}</a>
     {#if user.name }
-    <a href="#" on:click={logout}>Logout</a>
+    <a on:click={logout}>Logout</a>
     {/if}
 </nav>

frontend/src/routes/About.svelte

@@ -0,0 +1 @@
+<h1>About</h1>

frontend/src/routes/User.svelte

@@ -0,0 +1,4 @@
+<script>
+    let { id } = $props();
+</script>
+<h1>User {id}</h1>