Spaces:
Running
Running
File size: 2,571 Bytes
6ce4ca6 8173aa6 6ce4ca6 8173aa6 6ce4ca6 8173aa6 6ce4ca6 8173aa6 6ce4ca6 8173aa6 6ce4ca6 2d0da8c 67a499d 2d0da8c 67a499d 6ce4ca6 3cdf7b9 67a499d 3cdf7b9 6ce4ca6 67a499d 2d0da8c 6ce4ca6 2d0da8c 67a499d 6ce4ca6 2d0da8c 67a499d 6ce4ca6 2d0da8c 8173aa6 2d0da8c 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 |
<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">
<!-- Responsive Button Bar Container -->
<div
class="fixed top-2 right-2 left-2 z-50 flex flex-wrap items-center justify-between gap-1 select-none md:top-4 md:right-4 md:left-4 md:gap-2"
>
<!-- Left Group: Logo + Add Buttons -->
<div class="flex flex-wrap items-center gap-1 md:gap-2">
<!-- Logo/Favicon -->
<div class="flex items-center justify-center">
<img
src="/favicon_1024.png"
alt="Logo"
draggable="false"
class="h-8 w-8 invert-0 filter md:h-10 md:w-10 dark:invert"
/>
</div>
<!-- Add Robot Button Group -->
<div class="flex items-center justify-center overflow-hidden rounded-lg">
<AddRobotButton bind:open={addRobotDropdownMenuOpen} />
</div>
<!-- Add Sensor Button Group - Hidden on very small screens -->
<div class="hidden items-center justify-center overflow-hidden rounded-lg min-[480px]:flex">
<AddSensorButton bind:open={addSensorDropdownMenuOpen} />
</div>
<!-- Add AI Button Group - Hidden on small screens -->
<div class="hidden items-center justify-center overflow-hidden rounded-lg min-[560px]:flex">
<AddAIButton bind:open={addAIDropdownMenuOpen} {workspaceId} />
</div>
</div>
<!-- Right Group: Workspace ID + Settings -->
<div class="flex items-center gap-1 md:gap-2">
<!-- Workspace ID Button -->
<WorkspaceIdButton {workspaceId} bind:open={workspaceIdMenuOpen} />
<!-- Settings Button -->
<SettingsButton bind:open={settingsOpen} />
</div>
</div>
</div>
<SettingsSheet bind:open={settingsOpen} />
|