File size: 2,581 Bytes
6ce4ca6
 
 
 
 
 
8173aa6
6ce4ca6
 
8173aa6
6ce4ca6
 
 
 
8173aa6
6ce4ca6
 
 
8173aa6
6ce4ca6
 
 
8173aa6
 
6ce4ca6
 
 
 
 
 
 
3cdf7b9
6ce4ca6
3cdf7b9
6ce4ca6
3cdf7b9
 
 
 
 
 
6ce4ca6
 
 
 
 
 
 
 
3cdf7b9
6ce4ca6
 
 
 
 
 
 
3cdf7b9
6ce4ca6
 
 
 
 
 
 
8173aa6
 
 
 
6ce4ca6
 
 
 
 
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
<script lang="ts">
	import AddRobotButton from "@/components/interface/overlay/AddRobotButton.svelte";
	import AddSensorButton from "@/components/interface/overlay/AddSensorButton.svelte";
	import AddAIButton from "@/components/interface/overlay/AddAIButton.svelte";
	import SettingsButton from "@/components/interface/overlay/SettingsButton.svelte";
	import SettingsSheet from "@/components/interface/overlay/SettingsSheet.svelte";
	import WorkspaceIdButton from "@/components/interface/overlay/WorkspaceIdButton.svelte";

	interface Props {
		workspaceId: string;
		addRobotDropdownMenuOpen?: boolean;
		addSensorDropdownMenuOpen?: boolean;
		addAIDropdownMenuOpen?: boolean;
		settingsOpen?: boolean;
		workspaceIdMenuOpen?: boolean;
	}

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

<div class="select-none">
	<!-- Button Bar Container -->
	<div class="fixed top-4 left-4 z-50 flex gap-2 select-none">
		<!-- Add Robot Button Group -->
		<div class="flex items-center justify-center gap-2 overflow-hidden rounded-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-0 filter dark:invert"
				/>
			</div>
			<!-- Add robot button and dropdown menu (Top Left) -->
			<div class="flex items-center justify-center">
				<AddRobotButton bind:open={addRobotDropdownMenuOpen} />
			</div>
		</div>

		<!-- Add Sensor Button Group -->
		<div class="flex items-center justify-center overflow-hidden rounded-lg">
			<!-- Add sensor button and dropdown menu -->
			<div class="flex items-center justify-center">
				<AddSensorButton bind:open={addSensorDropdownMenuOpen} />
			</div>
		</div>

		<!-- Add AI Button Group -->
		<div class="flex items-center justify-center overflow-hidden rounded-lg">
			<!-- Add AI button and dropdown menu -->
			<div class="flex items-center justify-center">
				<AddAIButton bind:open={addAIDropdownMenuOpen} />
			</div>
		</div>
	</div>

	<div class="fixed top-4 right-4 z-50 flex gap-2">
		<!-- Workspace ID Button -->
		<WorkspaceIdButton {workspaceId} bind:open={workspaceIdMenuOpen} />

		<!-- Settings Button and Sheet (Top Right, Left Side) -->
		<SettingsButton bind:open={settingsOpen} />
	</div>
</div>
<SettingsSheet bind:open={settingsOpen} />