From 0111ffd8a26575b6472db9fea0973336f492cf4f Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Wed, 12 Jul 2023 15:32:30 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=87=20Adds=20navigation=20for=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/App.svelte                | 22 +++++++++++++---------
 app/src/components/Sidebar.svelte |  7 ++++---
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/src/App.svelte b/app/src/App.svelte
index afaa79c..e199c74 100644
--- a/app/src/App.svelte
+++ b/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>
diff --git a/app/src/components/Sidebar.svelte b/app/src/components/Sidebar.svelte
index 6919893..e7d94f1 100644
--- a/app/src/components/Sidebar.svelte
+++ b/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>