Implement client-side routing

frontend/src/App.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Router, Route } from "svelte-navigator";
   import { onMount } from "svelte";
 
   import { user } from "./stores";
@@ -11,7 +12,37 @@
   });
 </script>
 
-<Navbar />
-<section class="section">
-  <p>Hallo i bims 1 frontend</p>
-</section>
+<Router>
+  <Navbar />
+
+  <Route path="/">
+    <section class="section">
+      <p>Hallo i bims 1 frontend</p>
+    </section>
+  </Route>
+
+  <Route path="/foo">foo</Route>
+
+  <Route path="/bar">bar</Route>
+
+  <Route path="/monitoring">monitoring</Route>
+
+  <Route path="/mining">mining</Route>
+
+  <Route path="/stats">stats</Route>
+
+  <Route>
+    <section class="section">
+      <div class="container has-text-centered">
+        <h1 class="title is-1">404</h1>
+        <h2 class="subtitle is-5">
+          The page you are trying to reach either
+          <strong>does not exist</strong>
+          or
+          <strong>you are not authorized</strong>
+          to view it.
+        </h2>
+      </div>
+    </section>
+  </Route>
+</Router>

frontend/src/Navbar.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Navlink from "./Navlink.svelte";
+    import { Link } from "svelte-navigator";
+
     import logo from "./assets/turtle.png";
 
     import { user } from "./stores";
@@ -8,12 +11,10 @@
 
 <nav class="navbar">
     <div class="navbar-brand">
-        <a class="navbar-item" href="/">
-            <span class="icon-text">
-                <img class="image is-24x24" src={logo} alt="logo" />
-                <span><strong>Control Panel</strong></span>
-            </span>
-        </a>
+        <Link class="navbar-item" to="/">
+            <img class="image is-24x24 mr-1" src={logo} alt="logo" />
+            <span><strong>Control Panel</strong></span>
+        </Link>
         <!-- svelte-ignore a11y-missing-attribute -->
         <a
             role="button"
@@ -29,10 +30,13 @@
     </div>
     <div class="navbar-menu {menu_open ? 'is-active' : ''}">
         <div class="navbar-start">
-            <a class="navbar-item" href="/foo"> Foo </a>
-
-            <a class="navbar-item" href="/bar"> Bar </a>
+            <Navlink target="/foo" text="Foo" icon="fas fa-hippo" />
+            <Navlink target="/bar" text="Bar" icon="fas fa-otter" />
+            <Navlink target="/monitoring" text="Monitoring" icon="fas fa-binoculars" />
+            <Navlink target="/mining" text="Mining" icon="fas fa-person-digging" />
+            <Navlink target="/stats" text="Statistics" icon="fas fa-chart-line" />
         </div>
+
         <div class="navbar-end">
             {#if $user !== null}
                 <div class="navbar-item has-dropdown is-hoverable">

frontend/src/Navlink.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Link, useLocation } from "svelte-navigator";
+
+    const location = useLocation();
+
+    export let target: string;
+    export let icon: string;
+    export let text: string;
+</script>
+
+<Link
+    to={target}
+    class="navbar-item is-tab {$location.pathname === target
+        ? 'is-active'
+        : ''}"
+>
+    <span class="icon-text">
+        <span class="icon">
+            <i class={icon} />
+        </span>
+        <span>{text}</span>
+    </span>
+</Link>