🐨 Removes sidebar

app/src/App.svelte

@@ -6,9 +6,9 @@
 	import Controller from './routes/Controller.svelte';
 	import Config from './routes/Config.svelte';
 	import Health from './routes/SystemHealth.svelte';
-	import Sidebar from './components/Sidebar.svelte';
     import FileCache from './lib/cache';
 	import { socketLocation } from './lib/location';
+    import Settings from './routes/Settings.svelte';
 
 	export let url = window.location.pathname 
 	onMount(() => {
@@ -37,9 +37,9 @@
 
 <Router {url}>
 	<TopBar />
-	<Sidebar />
 	<div class="absolute w-full h-full bg-background text-on-background">
 		<Route path="/" component={Controller} />
+		<Route path="/settings/*page" component={Settings} />
 		<Route path="/config" component={Config} />
 		<Route path="/health" component={Health} />
 	</div>

app/src/components/Sidebar.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Link } from 'svelte-routing';
-	import { Icon, XMark, ChartBar, DevicePhoneMobile, Cog6Tooth } from 'svelte-hero-icons';
-	import { sidebarOpen } from '../lib/store';
-
-	const closeMenu = () => {
-		sidebarOpen.set(false);
-	};
-</script>
-
-<div
-	id="drawer-example"
-	style="background-color:#36393f"
-	class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform
-    {$sidebarOpen ? '' : '-translate-x-full'} bg-white w-40 dark:bg-gray-800"
-	tabindex="-1"
-	aria-labelledby="drawer-label"
->
-	<button
-		type="button"
-		on:click={closeMenu}
-		class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-	>
-		<Icon src={XMark} size="32" />
-	</button>
-	<div class="h-full w-full flex flex-col justify-evenly items-center">
-		<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>

app/src/components/Topbar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { isConnected, dataBuffer, status } from '../lib/socket';
 	import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
-	import { emulateModel, sidebarOpen } from '../lib/store';
+	import { emulateModel } from '../lib/store';
+    import { Link } from 'svelte-routing'
 
     const views = ["Virtual environment", "Robot camera"]
     const modes = ["Drive", "Choreography"]
@@ -15,9 +16,9 @@
 
 <div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
     <div class="flex gap-2 py-2">
-    <button class="ml-2" on:click={() => sidebarOpen.set(true)}>
-        <Icon src={Bars3} size="32" />
-    </button>
+        <Link to="/settings">
+            <Icon src={Bars3} size="32" />
+        </Link>
         <select bind:value={selected_modes} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
             {#each modes as mode}
             <option>{mode}</option>

app/src/components/settings/Info.svelte

@@ -0,0 +1,3 @@
+<div class="bg-blue-600 w-full h-full">
+INFO
+</div>

app/src/lib/socket.ts

@@ -20,7 +20,7 @@ export const data = writable();
 
 export const status:Writable<WebSocketStatus> = writable('CLOSED')
 
-export const socket:Writable<WebSocket> = writable(null)
+export const socket:Writable<WebSocket> = writable()
 
 export const connect = (url:string) => {
     status.set('CONNECTING')

app/src/lib/store.ts

@@ -1,7 +1,5 @@
 import { writable } from 'svelte/store';
 
-export const sidebarOpen = writable(false);
-
 export const emulateModel = writable(true);
 
 export const input = writable({left:{x:0, y:0}, right:{x:0, y:0}, height:70, speed:0});

app/src/routes/Settings.svelte

@@ -0,0 +1,51 @@
+<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';
+
+    export const page = ""
+
+	const menu = [
+		{
+			title: 'Calibration',
+			path: '/calibration',
+			component: Info
+		},
+		{
+			title: 'Settings',
+			path: '/settings',
+			component: Info
+		},
+		{
+			title: 'About',
+			path: '/about',
+			component: Info
+		},
+		{
+			title: 'Info',
+			path: '/info',
+			component: Info
+		}
+	];
+</script>
+
+<div class="pt-14 flex h-full">
+	<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>
+            </Link>
+		{/each}
+	</nav>
+	<main class="w-full h-full">
+        <Router>
+            {#each menu as link}
+			    <Route path={link.path} component={link.component}></Route>
+            {/each}
+        </Router>
+	</main>
+</div>