@@ -120,6 +120,27 @@ const DrawerContent = styled.div<{
120120 box-sizing: border-box;
121121` ;
122122
123+ const DrawerHeader = styled . div `
124+ display: flex;
125+ justify-content: flex-end;
126+ align-items: center;
127+ ` ;
128+
129+ const DrawerCloseButton = styled . button < {
130+ $color :string ;
131+ } > `
132+ background: transparent;
133+ border: none;
134+ cursor: pointer;
135+ color:${ ( p ) => p . $color }
136+ display: inline-flex;
137+ align-items: center;
138+ justify-content: center;
139+ width: 32px;
140+ height: 32px;
141+ border-radius: 16px;
142+ ` ;
143+
123144const DrawerList = styled . div < {
124145$itemStyle :NavLayoutItemStyleType ;
125146$hoverStyle :NavLayoutItemHoverStyleType ;
@@ -404,7 +425,8 @@ function renderHamburgerLayoutSection(children: any): any {
404425const drawerPlacement = children . drawerPlacement . getView ( ) ;
405426return (
406427< >
407- { children . hamburgerIcon . propertyView ( { label :"Icon" } ) }
428+ { children . hamburgerIcon . propertyView ( { label :"MenuIcon" } ) }
429+ { children . drawerCloseIcon . propertyView ( { label :"Close Icon" } ) }
408430{ children . hamburgerPosition . propertyView ( { label :"Hamburger Position" } ) }
409431{ children . hamburgerSize . propertyView ( { label :"Hamburger Size" } ) }
410432{ children . drawerPlacement . propertyView ( { label :"Drawer Placement" } ) }
@@ -467,6 +489,7 @@ let MobileTabLayoutTmp = (function () {
467489// Mode & hamburger/drawer config
468490menuMode :dropdownControl ( MobileModeOptions , MobileMode . Vertical ) ,
469491hamburgerIcon :IconControl ,
492+ drawerCloseIcon :IconControl ,
470493hamburgerPosition :dropdownControl ( HamburgerPositionOptions , "bottom-right" ) ,
471494hamburgerSize :withDefault ( StringControl , "56px" ) ,
472495drawerPlacement :dropdownControl ( DrawerPlacementOptions , "bottom" ) ,
@@ -539,6 +562,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
539562const hamburgerPosition = comp . children . hamburgerPosition . getView ( ) ;
540563const hamburgerSize = comp . children . hamburgerSize . getView ( ) ;
541564const hamburgerIconComp = comp . children . hamburgerIcon ;
565+ const drawerCloseIconComp = comp . children . drawerCloseIcon ;
542566const drawerPlacement = comp . children . drawerPlacement . getView ( ) ;
543567const drawerHeight = comp . children . drawerHeight . getView ( ) ;
544568const drawerWidth = comp . children . drawerWidth . getView ( ) ;
@@ -684,6 +708,17 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
684708bodyStyle = { drawerBodyStyle }
685709>
686710< DrawerContent $background = { backgroundStyle } >
711+ < DrawerHeader >
712+ < DrawerCloseButton
713+ aria-label = "Close"
714+ $color = { navStyle . text }
715+ onClick = { ( ) => setDrawerVisible ( false ) }
716+ >
717+ { drawerCloseIconComp . toJsonValue ( )
718+ ?drawerCloseIconComp . getView ( )
719+ :< span style = { { fontSize :20 } } > ×</ span > }
720+ </ DrawerCloseButton >
721+ </ DrawerHeader >
687722< DrawerList
688723$itemStyle = { navItemStyle }
689724$hoverStyle = { navItemHoverStyle }