[fix] page menu, drag handle css (#1406)

This PR fixes the CSS for the page menu drag handle while editing. It
also makes the page menu participate in the `useMenuIsOpen` API.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Select the draw tool
2. Open the page menu
3. Click on the canvas—there should be no dot!
4. Open the page menu
5. Click the edit icon
6. Hover the drag handle; the handle should look correct

### Release Notes

- Fix styling in the page menu

packages/ui/src/lib/components/PageMenu/PageMenu.tsx

@@ -3,6 +3,7 @@ import { TLPage, TLPageId } from '@tldraw/tlschema'
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useValue } from 'signia-react'
 import { useBreakpoint } from '../../hooks/useBreakpoint'
+import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { Button } from '../primitives/Button'
 import { Icon } from '../primitives/Icon'
@@ -16,6 +17,10 @@ export const PageMenu = function PageMenu() {
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
 
+	const handleOpenChange = useCallback(() => setIsEditing(false), [])
+
+	const [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)
+
 	const ITEM_HEIGHT = breakpoint < 5 ? 36 : 40
 
 	const rSortableContainer = useRef<HTMLDivElement>(null)
@@ -41,13 +46,6 @@ export const PageMenu = function PageMenu() {
 		setIsEditing((s) => !s)
 	}, [isReadonlyMode])
 
-	const [isOpen, setIsOpen] = useState(false)
-
-	const handleOpenChange = useCallback((isOpen: boolean) => {
-		setIsOpen(isOpen)
-		setIsEditing(false)
-	}, [])
-
 	const rMutables = useRef({
 		isPointing: false,
 		status: 'idle' as 'idle' | 'pointing' | 'dragging',
@@ -238,7 +236,7 @@ export const PageMenu = function PageMenu() {
 	}, [app, msg, isReadonlyMode])
 
 	return (
-		<Popover id="page menu" onOpenChange={handleOpenChange} open={isOpen}>
+		<Popover id="page menu" onOpenChange={onOpenChange} open={isOpen}>
 			<PopoverTrigger>
 				<Button
 					className="tlui-page-menu__trigger tlui-menu__trigger"

packages/ui/ui.css

@@ -1870,7 +1870,7 @@
 .tlui-page_menu__item__sortable__handle {
 	touch-action: none;
 	width: 32px;
-	height: 100%;
+	height: 40px;
 	cursor: grab;
 	color: var(--color-text-3);
 	flex-shrink: 0;