💩 Makes topbar setting remove canvas

app/src/components/Topbar.svelte

@@ -1,24 +1,34 @@
 <script lang="ts">
 	import { isConnected, dataBuffer, status } from '../lib/socket';
-	import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
+	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel } from '../lib/store';
-    import { Link } from 'svelte-routing'
+    import { Link, useLocation } from 'svelte-routing'
 
     const views = ["Virtual environment", "Robot camera"]
     const modes = ["Drive", "Choreography"]
 
+    const location = useLocation()
+
 	let selected_view = views[0];
 	let selected_modes = modes[0];
+    let settingOpen = window.location.pathname.includes('/settings')
 
     $: emulateModel.set(selected_view === views[0])
+    $: settingOpen = $location.pathname.includes('/settings')
 </script>
 
 
 <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">
-        <Link to="/settings">
-            <Icon src={Bars3} size="32" />
-        </Link>
+    <div class="flex gap-2 p-2">
+        {#if settingOpen}
+            <Link to="/">
+                <Icon src={XMark} size="32" /> 
+            </Link>
+        {:else}    
+            <Link to="/settings">
+                <Icon src={Bars3} size="32" />
+            </Link>
+        {/if}
         <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>