diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx index e86b8139..3b99016f 100644 --- a/src/app/client/client-view.tsx +++ b/src/app/client/client-view.tsx @@ -3,7 +3,13 @@ import { LogOut } from "lucide-react"; import Link from "next/link"; import { signOut } from "next-auth/react"; -import { type ReactNode, useCallback, useEffect, useState } from "react"; +import { + type ReactNode, + useCallback, + useEffect, + useState, +} from "react"; +import { createPortal } from "react-dom"; function ToolbarBtn({ onClick, @@ -91,110 +97,117 @@ export function ClientView({ const sep = base.includes("?") ? "&" : "?"; const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`; + const [mounted, setMounted] = useState(false); + useEffect(() => { setMounted(true); }, []); + + const toolbar = ( +
+ + + Home + + + + + window.location.reload()} title="Reload"> + + Reload + + + + + + + + Fullscreen + + + +
+ + Online users + + + + {onlineCount} +
+ signOut({ callbackUrl: "/" })} + title="Logout" + > + + +
+ ); + return (
-
- - - Home - - - - - window.location.reload()} title="Reload"> - - Reload - - - - - - - - Fullscreen - - - -
- - Online users - - - - {onlineCount} -
- signOut({ callbackUrl: "/" })} - title="Logout" - > - - -
+ {mounted && createPortal(toolbar, document.body)}