diff --git a/src/workbench/TitleBar.test.tsx b/src/workbench/TitleBar.test.tsx index 580e43e06..c8c802d89 100644 --- a/src/workbench/TitleBar.test.tsx +++ b/src/workbench/TitleBar.test.tsx @@ -106,6 +106,35 @@ describe("title bar in Distraction Free Mode (bare)", () => { }); }); +describe("expanded main menu in a frameless title bar", () => { + it("hides the right-hand toolbar while the menu is expanded and restores it on close", async () => { + const platform = usePlatform.getState(); + const project = useProject.getState(); + const menuModel = vi + .spyOn(commands, "menuModel") + .mockResolvedValue([{ kind: "submenu", id: "file", label: "File", children: [] }]); + usePlatform.setState({ os: "windows", framelessTitleBar: true, overlayTitleBar: false }); + useProject.setState({ settings: { appearance: { mainMenuStyle: "hamburger" } } as Settings }); + try { + render(); + await act(async () => {}); + const gear = () => screen.queryByRole("button", { name: "IDE and Project Settings" }); + expect(gear()).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Main Menu" })); + await screen.findByRole("menu"); + expect(gear()).toBeNull(); + expect(screen.getByRole("menubar")).toBeInTheDocument(); + fireEvent.keyDown(document.activeElement!, { key: "Escape" }); + await act(async () => {}); + expect(gear()).toBeInTheDocument(); + } finally { + menuModel.mockRestore(); + usePlatform.setState(platform); + useProject.setState(project); + } + }); +}); + describe("merged title bar menu", () => { it.each(["windows", "linux", "macos"])( "%s keeps toolbar controls available and uses the menu only when frameless", diff --git a/src/workbench/TitleBar.tsx b/src/workbench/TitleBar.tsx index 22d18b4fe..c8352499c 100644 --- a/src/workbench/TitleBar.tsx +++ b/src/workbench/TitleBar.tsx @@ -318,10 +318,12 @@ export function TitleBar({
{!minimal && ( <> - {toolbar && shown.right.map(entry)} -
- -
+ {toolbar && !menuExpanded && shown.right.map(entry)} + {!menuExpanded && ( +
+ +
+ )} )} {frameless && }