PageMenu.tsx

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

// Pages of the Vite multi-page app. Add new entries here as more pages appear.
const PAGES = [
  { label: 'Floor Plan', href: '/' },
  { label: 'CAD · Cabinet Cuts', href: '/cad/' },
];

export function PageMenu() {
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ top: 0, left: 0 });
  const btnRef = useRef<HTMLButtonElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const current = typeof window !== 'undefined' ? window.location.pathname : '/';

  // Position the dropdown just under the button (fixed → viewport coords).
  useLayoutEffect(() => {
    if (!open || !btnRef.current) return;
    const r = btnRef.current.getBoundingClientRect();