src/lib/components/interface/overlay/Overlay.svelte

<script lang="ts">
	import AddRobotButton from "@/components/interface/overlay/AddRobotButton.svelte";
	import SettingsButton from "@/components/interface/overlay/SettingsButton.svelte";
	import SettingsSheet from "@/components/interface/overlay/settingsSheet.svelte";

	interface Props {
		addRobotDropdownMenuOpen?: boolean;
		settingsOpen?: boolean;
	}

	let { addRobotDropdownMenuOpen = $bindable(false), settingsOpen = $bindable(false) }: Props =
		$props();
</script>

<!-- Button Bar Container -->
<div class="fixed top-4 left-4 z-50 flex gap-2">
	<!-- Add Robot Button Group -->
	<div class="flex items-center justify-center gap-2 overflow-hidden rounded-lg shadow-lg">
		<!-- Logo/Favicon -->
		<div class="flex items-center justify-center">
			<!-- From /favicon_1024.png -->
			<img src="/favicon_1024.png" alt="Logo" draggable="false" class="h-10 w-10 invert" />
		</div>
		<!-- Add robot button and dropdown menu (Top Left) -->
		<div class="flex items-center justify-center">
			<AddRobotButton bind:open={addRobotDropdownMenuOpen} />
		</div>
	</div>
</div>

<div class="fixed top-4 right-4 z-50">
	<!-- Settings Button and Sheet (Top Right, Left Side) -->
	<SettingsButton bind:open={settingsOpen} />
</div>

<SettingsSheet bind:open={settingsOpen} />