diff --git a/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
index 3be6caee..427e59fe 100644
--- a/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx
@@ -8,6 +8,7 @@ import { SubtitlesToggle } from './controls/SubtitlesToggle'
import { HandToggle } from './controls/HandToggle'
import { OptionsButton } from './controls/Options/OptionsButton'
import { StartMediaButton } from './controls/StartMediaButton'
+import { PipLateralMenu } from './controls/PipLateralMenu'
/**
* Compact control bar for the Picture-in-Picture window.
@@ -19,15 +20,20 @@ export const PipControlBar = ({
showScreenShare: boolean
}) => (
-
-
-
- {showScreenShare && }
-
-
-
-
-
+
+
+
+
+ {showScreenShare && }
+
+
+
+
+
+
+
+
+
)
@@ -35,13 +41,36 @@ const PipControls = styled('div', {
base: {
flex: '0 0 auto',
display: 'flex',
- flexWrap: 'wrap',
justifyContent: 'center',
- gap: '0.4rem',
+ alignItems: 'center',
+ gap: '0.5rem',
padding: '0.5rem 0.75rem',
backgroundColor: 'var(--lk-controlbar-bg)',
borderTop: '1px solid',
borderColor: 'var(--lk-control-border-color)',
+ width: '100%',
+ position: 'relative',
+ },
+})
+
+const PipControlsCenter = styled('div', {
+ base: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '0.4rem',
+ flex: '1 1 auto',
+ },
+})
+
+const PipControlsRight = styled('div', {
+ base: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ position: 'absolute',
+ right: '1.35rem',
},
})
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx
new file mode 100644
index 00000000..2bc80db6
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx
@@ -0,0 +1,67 @@
+import { css } from '@/styled-system/css'
+import { useState } from 'react'
+import { Dialog, DialogTrigger } from 'react-aria-components'
+import { Button } from '@/primitives'
+import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { StyledPopover } from '@/primitives/Popover'
+import { useOverlayBoundaryElement } from '@/primitives/useOverlayPortalContainer'
+import { ChatToggle } from './ChatToggle'
+import { ParticipantsToggle } from './Participants/ParticipantsToggle'
+import { ToolsToggle } from './ToolsToggle'
+import { InfoToggle } from './InfoToggle'
+import { AdminToggle } from '../AdminToggle'
+
+const NavigationControls = ({ onPress }: { onPress?: () => void }) => (
+ <>
+
+
+
+
+
+ >
+)
+
+/**
+ * PiP chevron menu that exposes Info/Chat/Participants/Tools/Admin.
+ */
+export const PipLateralMenu = () => {
+ const { t } = useTranslation('rooms')
+ const [isOpen, setIsOpen] = useState(false)
+ const boundaryElement = useOverlayBoundaryElement()
+
+ const handlePress = () => setIsOpen(!isOpen)
+ const handleClose = () => setIsOpen(false)
+
+ return (
+
+
+
+
+
+
+ )
+}
+