src/lib/components/panel/Panels.svelte

<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}