diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx index e571d655..582d08c1 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx @@ -5,7 +5,7 @@ import { ToolsToggle } from '../../components/controls/ToolsToggle' import { InfoToggle } from '../../components/controls/InfoToggle' import { AdminToggle } from '../../components/AdminToggle' import { useSize } from '../../hooks/useResizeObserver' -import { useState, RefObject } from 'react' +import { useState, RefObject, useEffect } from 'react' import { Dialog, DialogTrigger, Popover } from 'react-aria-components' import { Button } from '@/primitives' import type { ToggleButtonProps } from '@/primitives/ToggleButton' @@ -66,12 +66,32 @@ export const LateralMenu = () => { ) } +interface BreakpointObserverProps { + containerRef: RefObject + onWideChange: (isWide: boolean) => void +} + +const BreakpointObserver = ({ + containerRef, + onWideChange, +}: BreakpointObserverProps) => { + const { width } = useSize(containerRef) + const isWide = width > CONTROL_BAR_BREAKPOINT + + useEffect(() => { + onWideChange(isWide) + }, [isWide, onWideChange]) + + return null +} + export const MoreOptions = ({ parentElement, }: { parentElement: RefObject }) => { - const { width: parentWidth } = useSize(parentElement) + const [isWide, setIsWide] = useState(false) + return ( ) }