put menu trigger to top left

This commit is contained in:
Ryan Di
2025-09-12 17:08:53 +10:00
parent 12644eb347
commit fb2975b0f2
4 changed files with 20 additions and 19 deletions

View File

@@ -107,29 +107,24 @@ export const MobileMenu = ({
return (
<div className="App-toolbar-content">
<MainMenuTunnel.Out />
{actionManager.renderAction("toggleEditMenu")}
{actionManager.renderAction(
appState.multiElement ? "finalize" : "duplicateSelection",
)}
{actionManager.renderAction("deleteSelectedElements")}
<div>
{actionManager.renderAction("undo")}
{actionManager.renderAction("redo")}
</div>
{renderTopRightUI?.(true, appState)}
</div>
);
};
return (
<>
{renderSidebars()}
{/* {renderSidebars()} */}
<FixedSideContainer side="top" className="App-top-bar">
{renderAppToolbar()}
<HintViewer
appState={appState}
isMobile={true}
device={device}
app={app}
/>
{renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
</FixedSideContainer>
<div
className="App-bottom-bar"

View File

@@ -18,6 +18,18 @@
width: 100%;
row-gap: 0.75rem;
// When main menu is in the top toolbar, position relative to trigger
&.main-menu-dropdown {
position: fixed;
left: 1rem;
top: 3.5rem;
min-width: 280px;
max-width: calc(100vw - 2rem);
margin-top: 0;
margin-bottom: 0;
z-index: var(--zIndex-layerUI);
}
.dropdown-menu-container {
padding: 8px 8px;
box-sizing: border-box;

View File

@@ -53,6 +53,8 @@ const MainMenu = Object.assign(
onSelect={composeEventHandlers(onSelect, () => {
setAppState({ openMenu: null });
})}
placement="bottom"
className={device.editor.isMobile ? "main-menu-dropdown" : ""}
>
{children}
{device.editor.isMobile && appState.collaborators.size > 0 && (

View File

@@ -235,7 +235,6 @@ body.excalidraw-cursor-resize * {
z-index: var(--zIndex-layerUI);
display: flex;
flex-direction: column;
align-items: center;
}
.App-bottom-bar {
@@ -280,14 +279,7 @@ body.excalidraw-cursor-resize * {
.App-toolbar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px;
.dropdown-menu--mobile {
bottom: 55px;
top: auto;
}
flex-direction: column;
}
.App-mobile-menu {