🖇 Adds navigation for routes

app/src/App.svelte

@@ -1,22 +1,26 @@
 <script lang="ts">
+	import { Router, Route } from 'svelte-routing';
 	import { onMount } from 'svelte';
-	import Topbar from './components/Topbar.svelte';
+	import TopBar from './components/TopBar.svelte';
 	import { connect } from './lib/socket';
-	import Stream from './components/Views/Stream.svelte';
-	import Controls from './components/Controls.svelte';
+	import Controller from './routes/Controller.svelte';
+	import Config from './routes/Config.svelte';
+	import Health from './routes/SystemHealth.svelte';
 	import location from './lib/location';
 	import Sidebar from './components/Sidebar.svelte';
 
+	export let url = window.location.pathname;
 	onMount(() => {
 		connect(`ws://${location}`);
 	});
 </script>
 
-<main class="w-screen h-screen">
-	<Topbar />
+<Router {url}>
+	<TopBar />
 	<Sidebar />
-	<div class="flex justify-center items-center w-full h-full">
-		<Stream />
-		<Controls />
+	<div class="absolute w-full h-full">
+		<Route path="/" component={Controller} />
+		<Route path="/config" component={Config} />
+		<Route path="/health" component={Health} />
 	</div>
-</main>
+</Router>

app/src/components/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Link } from 'svelte-routing';
 	import { Icon, XMark, ChartBar, DevicePhoneMobile, Cog6Tooth } from 'svelte-hero-icons';
 	import { sidebarOpen } from '../lib/store';
 
@@ -23,8 +24,8 @@
 		<Icon src={XMark} size="32" />
 	</button>
 	<div class="h-full w-full flex flex-col justify-evenly items-center">
-		<button on:click={closeMenu}><Icon src={DevicePhoneMobile} size="32" /></button>
-		<button on:click={closeMenu}><Icon src={ChartBar} size="32" /></button>
-		<button on:click={closeMenu}><Icon src={Cog6Tooth} size="32" /></button>
+		<Link to="/"><Icon src={DevicePhoneMobile} size="32" /></Link>
+		<Link to="/health"><Icon src={ChartBar} size="32" /></Link>
+		<Link to="/config"><Icon src={Cog6Tooth} size="32" /></Link>
 	</div>
 </div>