diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx index b2a820d3..d6f2500e 100644 --- a/src/app/client/client-view.tsx +++ b/src/app/client/client-view.tsx @@ -1,6 +1,6 @@ "use client"; -import { LogOut } from "lucide-react"; +import { ChevronLeft, ChevronRight, LogOut } from "lucide-react"; import Link from "next/link"; import { signOut } from "next-auth/react"; import { @@ -56,11 +56,13 @@ export function ClientView({ clientUrl, hotelName, initialOnline, + defaultToolbarPosition = "right", }: { ticket: string; clientUrl: string; hotelName: string; initialOnline: number; + defaultToolbarPosition?: string; }) { const [_isFullscreen, setIsFullscreen] = useState(false); const [onlineCount, setOnlineCount] = useState(initialOnline); @@ -98,10 +100,36 @@ export function ClientView({ const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`; const [mounted, setMounted] = useState(false); + const [position, setPosition] = useState<"left" | "right">("right"); + useEffect(() => { setMounted(true); }, []); + useEffect(() => { + const params = new URLSearchParams(window.location.search); + const urlPos = params.get("toolbar"); + if (urlPos === "left" || urlPos === "right") { + setPosition(urlPos); + return; + } + try { + const stored = localStorage.getItem("client_toolbar_position"); + if (stored === "left" || stored === "right") { + setPosition(stored); + return; + } + } catch { /* private mode */ } + if (defaultToolbarPosition === "left" || defaultToolbarPosition === "right") + setPosition(defaultToolbarPosition as "left" | "right"); + }, [defaultToolbarPosition]); + + function togglePosition() { + const next = position === "left" ? "right" : "left"; + setPosition(next); + try { localStorage.setItem("client_toolbar_position", next); } catch {} + } + const toolbar = ( -