@@ -5,7 +5,7 @@ import { Section, sectionNames } from "lowcoder-design";
55import styled from "styled-components" ;
66import { clickEvent , eventHandlerControl } from "comps/controls/eventHandlerControl" ;
77import { BoolCodeControl , StringControl } from "comps/controls/codeControl" ;
8- import { dropdownControl } from "comps/controls/dropdownControl" ;
8+ import { dropdownControl , PositionControl } from "comps/controls/dropdownControl" ;
99import { alignWithJustifyControl } from "comps/controls/alignControl" ;
1010import { navListComp } from "./navItemComp" ;
1111import { menuPropertyView } from "./components/MenuItemList" ;
@@ -29,10 +29,11 @@ import {
2929import { hiddenPropertyView , showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils" ;
3030import { trans } from "i18n" ;
3131
32- import { useContext , useState } from "react" ;
32+ import { useContext , useState , useCallback } from "react" ;
3333import { EditorContext } from "comps/editorState" ;
3434import { createNavItemsControl } from "./components/NavItemsControl" ;
3535import { Layers } from "constants/Layers" ;
36+ import { CanvasContainerID } from "constants/domLocators" ;
3637
3738type IProps = {
3839$justify :boolean ;
@@ -234,7 +235,7 @@ function renderLayoutSection(children: any) {
234235 ...common ,
235236children . hamburgerPosition . propertyView ( { label :"Hamburger Position" } ) ,
236237children . hamburgerSize . propertyView ( { label :"Hamburger Size" } ) ,
237- children . drawerPlacement . propertyView ( { label :"Drawer Placement" , radioButton :true } ) ,
238+ children . placement . propertyView ( { label :trans ( "drawer.placement" ) , radioButton :true } ) ,
238239children . shadowOverlay . propertyView ( { label :"Shadow Overlay" } ) ,
239240] ;
240241const bar = [
@@ -311,10 +312,7 @@ const childrenMap = {
311312{ label :"Bottom Left" , value :"bottom-left" } ,
312313] , "top-right" ) ,
313314hamburgerSize :withDefault ( StringControl , "56px" ) ,
314- drawerPlacement :dropdownControl ( [
315- { label :"Left" , value :"left" } ,
316- { label :"Right" , value :"right" } ,
317- ] , "right" ) ,
315+ placement :PositionControl ,
318316shadowOverlay :withDefault ( BoolCodeControl , true ) ,
319317horizontalAlignment :alignWithJustifyControl ( ) ,
320318style :migrateOldData ( styleControl ( NavigationStyle , 'style' ) , fixOldStyleData ) ,
@@ -336,6 +334,10 @@ const childrenMap = {
336334
337335const NavCompBase = new UICompBuilder ( childrenMap , ( props ) => {
338336const [ drawerVisible , setDrawerVisible ] = useState ( false ) ;
337+ const getContainer = useCallback ( ( ) =>
338+ document . querySelector ( `#${ CanvasContainerID } ) || document . body ,
339+ [ ]
340+ ) ;
339341const data = props . items ;
340342const items = (
341343< >
@@ -471,11 +473,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
471473< MenuOutlined />
472474</ FloatingHamburgerButton >
473475< Drawer
474- placement = { ( props . drawerPlacement as any ) || "right" }
476+ placement = { props . placement || "right" }
475477closable = { true }
476478onClose = { ( ) => setDrawerVisible ( false ) }
477479open = { drawerVisible }
478480mask = { props . shadowOverlay }
481+ getContainer = { getContainer }
479482styles = { { body :{ padding :"8px" , background :props . drawerContainerStyle ?. background } } }
480483destroyOnClose
481484>