🔝 Adds styling and function to topbar select
This commit is contained in:
@@ -3,9 +3,13 @@
|
|||||||
import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
|
import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
|
||||||
import { emulateModel, sidebarOpen } from '../lib/store';
|
import { emulateModel, sidebarOpen } from '../lib/store';
|
||||||
|
|
||||||
const views = ["Robot camera", "Virtual environment"]
|
const views = ["Virtual environment", "Robot camera"]
|
||||||
const modes = ["Drive", "Choreography"]
|
const modes = ["Drive", "Choreography"]
|
||||||
|
|
||||||
|
let selected_view = views[0];
|
||||||
|
let selected_modes = modes[0];
|
||||||
|
|
||||||
|
$: emulateModel.set(selected_view === views[0])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -14,13 +18,13 @@
|
|||||||
<button class="ml-2" on:click={() => sidebarOpen.set(true)}>
|
<button class="ml-2" on:click={() => sidebarOpen.set(true)}>
|
||||||
<Icon src={Bars3} size="32" />
|
<Icon src={Bars3} size="32" />
|
||||||
</button>
|
</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}
|
{#each modes as mode}
|
||||||
<option>{mode}</option>
|
<option>{mode}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</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}
|
{#each views as view}
|
||||||
<option>{view}</option>
|
<option>{view}</option>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Reference in New Issue
Block a user