📐 Adds more settings pages

app/src/routes/Settings.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { Link, Route, Router } from 'svelte-routing';
-	import { dataBuffer, socket } from '../lib/socket';
-	import { humanFileSize } from '../lib/utils';
 	import Info from '../components/settings/Info.svelte';
+	import Log from '../components/settings/Log.svelte';
+	import Configuration from '../components/settings/Configuration.svelte';
+	import { Icon, Wifi, CommandLine, InformationCircle, BookOpen, AdjustmentsVertical, Cog6Tooth, Newspaper } from 'svelte-hero-icons';
+	import Calibration from '../components/settings/Calibration.svelte';
 
     export const page = ""
 
@@ -10,23 +12,27 @@
 		{
 			title: 'Calibration',
 			path: '/calibration',
-			component: Info
+            icon: AdjustmentsVertical,
+			component: Calibration
 		},
 		{
-			title: 'Settings',
-			path: '/settings',
-			component: Info
-		},
-		{
-			title: 'About',
-			path: '/about',
-			component: Info
-		},
-		{
-			title: 'Info',
+            title: 'System info',
 			path: '/info',
+            icon: InformationCircle,
 			component: Info
-		}
+		},
+        {
+            title: 'Log',
+			path: '/log',
+            icon: BookOpen,
+			component: Log
+		},
+        {
+            title: 'Settings',
+            path: '/settings',
+            icon: Cog6Tooth,
+            component: Configuration
+        },
 	];
 </script>
 
@@ -34,9 +40,8 @@
 	<nav class="w-1/6 flex flex-col">
 		{#each menu as link}
 			<Link to={'/settings'+link.path}>
-                <div class="px-4 py-2">
-                    {link.title}
-                    
+                <div class="px-4 py-2 flex gap-2 items-center">
+                    <Icon src={link.icon} size="24" />{link.title}
                 </div>
             </Link>
 		{/each}