Add option to hide multiplayer menu (#576)

* add multiplayer menu, view to menu

* update icon

* Add option to hide showMultiplayerMenu

packages/tldraw/src/Tldraw.tsx

@@ -39,6 +39,10 @@ export interface TldrawProps extends TDCallbacks {
    */
   showMenu?: boolean
 
+  /**
+   * (optional) Whether to show the multiplayer menu.
+   */
+  showMultiplayerMenu?: boolean
   /**
    * (optional) Whether to show the pages UI.
    */
@@ -94,6 +98,7 @@ export function Tldraw({
   currentPageId,
   autofocus = true,
   showMenu = true,
+  showMultiplayerMenu = true,
   showPages = true,
   showTools = true,
   showZoom = true,
@@ -259,6 +264,7 @@ export function Tldraw({
         autofocus={autofocus}
         showPages={showPages}
         showMenu={showMenu}
+        showMultiplayerMenu={showMultiplayerMenu}
         showStyles={showStyles}
         showZoom={showZoom}
         showTools={showTools}
@@ -275,6 +281,7 @@ interface InnerTldrawProps {
   autofocus: boolean
   showPages: boolean
   showMenu: boolean
+  showMultiplayerMenu: boolean
   showZoom: boolean
   showStyles: boolean
   showUI: boolean
@@ -288,6 +295,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
   autofocus,
   showPages,
   showMenu,
+  showMultiplayerMenu,
   showZoom,
   showStyles,
   showTools,
@@ -450,6 +458,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
                 readOnly={readOnly}
                 showPages={showPages}
                 showMenu={showMenu}
+                showMultiplayerMenu={showMultiplayerMenu}
                 showStyles={showStyles}
                 showZoom={showZoom}
                 showSponsorLink={showSponsorLink}

packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx

@@ -60,16 +60,18 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
 
   return (
     <DropdownMenu.Root dir="ltr">
-      <DMTriggerIcon>{room ? <MultiplayerIcon /> : <CursorArrowIcon />}</DMTriggerIcon>
+      <DMTriggerIcon id="TD-MultiplayerMenuIcon">
-      <DMContent variant="menu" align="start">
+        {room ? <MultiplayerIcon /> : <CursorArrowIcon />}
-        <DMItem onClick={handleCopySelect} disabled={!room}>
+      </DMTriggerIcon>
+      <DMContent variant="menu" align="start" id="TD-MultiplayerMenu">
+        <DMItem id="TD-Multiplayer-CopyInviteLink" onClick={handleCopySelect} disabled={!room}>
           Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
         </DMItem>
-        <DMDivider />
+        <DMDivider id="TD-Multiplayer-CopyInviteLinkDivider" />
-        <DMItem onClick={handleCreateMultiplayerRoom}>
+        <DMItem id="TD-Multiplayer-CreateMultiplayerRoom" onClick={handleCreateMultiplayerRoom}>
           <a href="https://tldraw.com/r">Create a Multiplayer Project</a>
         </DMItem>
-        {/* <DMItem onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem> */}
+        {/* <DMItem id="TD-Multiplayer-CopyToMultiplayerRoom" onClick={handleCopyToMultiplayerRoom}>Copy to Multiplayer Room</DMItem> */}
       </DMContent>
     </DropdownMenu.Root>
   )

packages/tldraw/src/components/TopPanel/TopPanel.tsx

@@ -6,10 +6,9 @@ import { ZoomMenu } from './ZoomMenu'
 import { StyleMenu } from './StyleMenu'
 import { Panel } from '~components/Primitives/Panel'
 import { ToolButton } from '~components/Primitives/ToolButton'
-import { MultiplayerIcon, RedoIcon, UndoIcon } from '~components/Primitives/icons'
+import { RedoIcon, UndoIcon } from '~components/Primitives/icons'
 import { breakpoints } from '~components/breakpoints'
 import { useTldrawApp } from '~hooks'
-import { CursorArrowIcon } from '@radix-ui/react-icons'
 import { MultiplayerMenu } from './MultiplayerMenu'
 
 interface TopPanelProps {
@@ -18,6 +17,7 @@ interface TopPanelProps {
   showMenu: boolean
   showStyles: boolean
   showZoom: boolean
+  showMultiplayerMenu: boolean
   showSponsorLink: boolean
 }
 
@@ -28,6 +28,7 @@ export function TopPanel({
   showStyles,
   showZoom,
   showSponsorLink,
+  showMultiplayerMenu,
 }: TopPanelProps) {
   const app = useTldrawApp()
 
@@ -36,7 +37,7 @@ export function TopPanel({
       {(showMenu || showPages) && (
         <Panel side="left" id="TD-MenuPanel">
           {showMenu && <Menu showSponsorLink={showSponsorLink} readOnly={readOnly} />}
-          {showMenu && <MultiplayerMenu />}
+          {showMultiplayerMenu && <MultiplayerMenu />}
           {showPages && <PageMenu />}
         </Panel>
       )}