🖇 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>