darkmode & lightmode switch

apps/dispatch/app/(dispatch)/_components/navbar/Navbar.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { ToggleTalkButton } from "../ToggleTalkButton";
+import { ChangeRufgruppe } from "../ChangeRufgruppe";
+import { Notifications } from "../Notifications";
+import Link from "next/link";
+import { Connection } from "../Connection";
+import { ThemeSwap } from "./_components/ThemeSwap";
+import { useState } from "react";
+
+export default function Navbar() {
+	const [isDark, setIsDark] = useState(false);
+
+	const toggleTheme = () => {
+		const newTheme = !isDark;
+		setIsDark(newTheme);
+		document.documentElement.setAttribute(
+			"data-theme",
+			newTheme ? "nord" : "dark",
+		);
+	};
+
+	return (
+		<div className="navbar bg-base-100 shadow-sm">
+			<div className="flex-1">
+				<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
+			</div>
+			<div className="flex gap-2">
+				<ul className="menu menu-horizontal bg-base-200 rounded-box">
+					<li>
+						<ToggleTalkButton />
+					</li>
+					<li>
+						<ChangeRufgruppe />
+					</li>
+				</ul>
+			</div>
+			<div className="flex gap-2">
+				<Notifications />
+			</div>
+			<div className="flex gap-6">
+				<ThemeSwap isDark={isDark} toggleTheme={toggleTheme} />
+				<div className="flex items-center">
+					<Connection />
+				</div>
+				<div className="dropdown dropdown-end">
+					<div tabIndex={0} role="button" className="btn btn-ghost">
+						...
+					</div>
+					<ul
+						tabIndex={0}
+						className="menu menu-sm dropdown-content bg-base-100 box z-1 mt-3 w-52 p-2 shadow"
+					>
+						<li>
+							<a className="justify-between">Profil</a>
+						</li>
+						<li>
+							<a>Einstellungen</a>
+						</li>
+						<li>
+							<Link href={"/logout"}>
+								<p>Logout</p>
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/dispatch/app/(dispatch)/_components/navbar/_components/ThemeSwap.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+
+interface ThemeSwapProps {
+	isDark: boolean;
+	toggleTheme: () => void;
+}
+
+export const ThemeSwap: React.FC<ThemeSwapProps> = ({
+	isDark,
+	toggleTheme,
+}) => {
+	return (
+		<label className="swap swap-rotate">
+			<input
+				type="checkbox"
+				className="theme-controller"
+				checked={isDark}
+				onChange={toggleTheme}
+			/>
+			<MoonIcon className="swap-off h-5 w-5 fill-current" />
+			<SunIcon className="swap-on h-5 w-5 fill-current" />
+		</label>
+	);
+};