Spaces:
Running
Running
File size: 2,241 Bytes
3aea7c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<script lang="ts">
import ControlPanel from "./ControlPanel.svelte";
import SettingsPanel from "./SettingsPanel.svelte";
type Tab = 'controls' | 'settings';
interface Props {
activeTab?: Tab;
isOpen?: boolean;
}
let { activeTab = $bindable("controls"), isOpen = $bindable(false) }: Props = $props();
</script>
{#if isOpen}
<div class="absolute bottom-5 left-5 z-50">
<button
onclick={() => (isOpen = false)}
class="rounded bg-gray-700 px-3 py-1.5 text-sm text-white transition-colors hover:bg-gray-600"
>
Hide Controls
</button>
</div>
{:else}
<div
class="absolute top-0 right-0 h-screen w-80 overflow-y-auto border-l border-slate-600 bg-gradient-to-b from-slate-700 to-slate-800 text-white shadow-2xl"
>
<div
class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-600 bg-slate-700/80 p-6 backdrop-blur-sm"
>
<h2 class="m-0 text-xl font-semibold text-slate-100">Robot Controls</h2>
<div class="flex flex-wrap items-center gap-2">
<span class="rounded-xl bg-sky-400 px-3 py-1 text-sm font-medium text-slate-900"
>Robot</span
>
</div>
<button
onclick={() => (isOpen = true)}
class="ml-2 rounded-full px-2 text-xl transition-colors hover:bg-slate-800"
title="Collapse"
>
×
</button>
</div>
<!-- Tab Navigation (only show if custom URDF is enabled) -->
<div class="flex border-b border-slate-600">
<button
class="flex-1 cursor-pointer border-none bg-transparent px-4 py-3 text-sm text-slate-300 transition-all hover:bg-slate-700/50 {activeTab ===
'controls'
? 'border-b-2 border-sky-400 bg-sky-400/10 text-slate-100'
: ''}"
onclick={() => (activeTab = 'controls')}
>
Controls
</button>
<button
class="flex-1 cursor-pointer border-none bg-transparent px-4 py-3 text-sm text-slate-300 transition-all hover:bg-slate-700/50 {activeTab ===
'settings'
? 'border-b-2 border-sky-400 bg-sky-400/10 text-slate-100'
: ''}"
onclick={() => (activeTab = 'settings')}
>
Settings
</button>
</div>
<div class="p-4">
{#if activeTab === 'controls'}
<ControlPanel />
{:else if activeTab === 'settings'}
<SettingsPanel />
{/if}
</div>
</div>
{/if}
|