From 4e23ca13c3349ed028224e0661a77f097d47f04c Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 3 Feb 2024 20:10:02 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=9D=20Adds=20styling=20and=20function?=
 =?UTF-8?q?=20to=20topbar=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Topbar.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/src/components/Topbar.svelte b/app/src/components/Topbar.svelte
index 5327598..66a8de1 100644
--- a/app/src/components/Topbar.svelte
+++ b/app/src/components/Topbar.svelte
@@ -3,9 +3,13 @@
 	import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel, sidebarOpen } from '../lib/store';
 
-    const views = ["Robot camera", "Virtual environment"]
+    const views = ["Virtual environment", "Robot camera"]
     const modes = ["Drive", "Choreography"]
 
+	let selected_view = views[0];
+	let selected_modes = modes[0];
+
+    $: emulateModel.set(selected_view === views[0])
 </script>
 
 
@@ -14,13 +18,13 @@
     <button class="ml-2" on:click={() => sidebarOpen.set(true)}>
         <Icon src={Bars3} size="32" />
     </button>
-        <select>
+        <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>
             {/each}
         </select>
         
-        <select>
+        <select bind:value={selected_view} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
             {#each views as view}
             <option>{view}</option>
             {/each}