Map Einstellungen für Piloten

apps/dispatch/app/(app)/pilot/page.tsx

@@ -11,6 +11,7 @@ import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { checkSimulatorConnected } from "@repo/shared-components";
 import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";
+import { SettingsBoard } from "_components/left/SettingsBoard";
 
 const Map = dynamic(() => import("_components/map/Map"), {
 	ssr: false,
@@ -39,6 +40,11 @@ const PilotPage = () => {
 				</div>
 				<div className="flex w-2/3 h-full">
 					<div className="relative flex flex-1 h-full">
+						<div className="absolute left-0 top-19/20 transform -translate-y-1/2 pl-4 z-999999">
+							<div className="flex items-center justify-between gap-4">
+								<SettingsBoard />
+							</div>
+						</div>
 						<Map />
 						<div className="absolute top-5 right-10 z-99999 space-y-2">
 							{!simulatorConnected && status === "connected" && (

apps/dispatch/app/_components/left/SettingsBoard.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useLeftMenuStore } from "_store/leftMenuStore";
+import { cn } from "@repo/shared-components";
+import { SettingsIcon } from "lucide-react";
+
+export const SettingsBoard = () => {
+	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
+
+	const cross = (
+		<svg
+			aria-label="disabled"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth="4"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		>
+			<path d="M18 6 6 18" />
+			<path d="m6 6 12 12" />
+		</svg>
+	);
+	const check = (
+		<svg aria-label="enabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<g
+				strokeLinejoin="round"
+				strokeLinecap="round"
+				strokeWidth="4"
+				fill="none"
+				stroke="currentColor"
+			>
+				<path d="M20 6 9 17l-5-5"></path>
+			</g>
+		</svg>
+	);
+
+	return (
+		<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
+			<div className="indicator">
+				<button
+					className="btn btn-soft btn-sm btn-info"
+					onClick={() => {
+						setSituationTabOpen(!situationTabOpen);
+					}}
+				>
+					<SettingsIcon size={18} />
+				</button>
+			</div>
+			{situationTabOpen && (
+				<div
+					tabIndex={0}
+					className="dropdown-content card bg-base-200 shadow-md z-[1100] ml-2 border-1 border-info min-w-[300px] max-h-[300px]"
+				>
+					<div className="card-body flex flex-row gap-4">
+						<div className="flex flex-col w-full h-full gap-2">
+							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
+								<SettingsIcon size={18} /> Map Einstellungen
+							</h2>
+							<div className="flex items-center gap-2">
+								<label className="toggle text-base-content">
+									<input type="checkbox" />
+									{cross}
+									{check}
+								</label>
+								Folge mir selbst
+							</div>
+							<div className="flex items-center gap-2">
+								<label className="toggle text-base-content">
+									<input type="checkbox" />
+									{cross}
+									{check}
+								</label>
+								Zeige andere Piloten
+							</div>
+							<div className="flex items-center gap-2">
+								<label className="toggle text-base-content">
+									<input type="checkbox" />
+									{cross}
+									{check}
+								</label>
+								Zeige andere Einsätze
+							</div>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};