Add links and new pages

frontend/src/routes/+layout.svelte

@@ -1 +1,7 @@
-<slot></slot>
+<script>
+	import BottomAppBar from './components/BottomAppBar.svelte';
+</script>
+<slot></slot>
+<footer>
+	<BottomAppBar />
+</footer>

frontend/src/routes/+page.svelte

@@ -17,9 +17,7 @@
 	</div>
 </main>
 
-<footer>
-	<BottomAppBar />
-</footer>
+
 
 <style>
 	.bold {

frontend/src/routes/components/BottomAppBar.svelte

@@ -1,13 +1,13 @@
 <div id="container">
-	<div>
+	<a href="/">
 		<img src="/images/home-icon.png" alt="home" />
-	</div>
-	<div>
+	</a>
+	<a href="/paths">
 		<img src="/images/routes-icon.png" alt="possible routes" />
-	</div>
-	<div>
+	</a>
+	<a href="/settings">
 		<img src="/images/settings-icon.png" alt="settings" />
-	</div>
+	</a>
 </div>
 
 <style>
@@ -20,7 +20,8 @@
 		background-color: var(--card-background-color);
 	}
 
-	#container > div {
+	#container > a {
+		display: block;
 		flex: 1;
 		display: grid;
 		place-items: center;

frontend/src/routes/components/Path.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	export let type: string;
 	export let color: string;
+	export const path = '/path'
 </script>
 
-<div class="route-card">
+<a href='{path}' class="route-card" >
 	<div class="route-card-left" style="background-color: {color}">
 		<img src="/images/app-bar-logo.png" alt="logo" />
 	</div>
@@ -14,10 +15,11 @@
 		</div>
 	</div>
 	<div class="route-card-right" />
-</div>
+</a>
 
 <style>
 	.route-card {
+		display: block;
 		flex: 1;
 		--route-card-radius: 45px;
 		border-radius: var(--route-card-radius);

frontend/src/routes/path/+page.svelte

@@ -0,0 +1 @@
+Simple Path

frontend/src/routes/settings/+page.svelte

@@ -0,0 +1 @@
+Settings