import React, { useState } from 'react'; import { Button, Drawer } from 'antd'; const App: React.FC = () => { const [open, setOpen] = useState(false); const [childrenDrawer, setChildrenDrawer] = useState(false); const showDrawer = () => { setOpen(true); }; const onClose = () => { setOpen(false); }; const showChildrenDrawer = () => { setChildrenDrawer(true); }; const onChildrenDrawerClose = () => { setChildrenDrawer(false); }; return ( <> <Button type="primary" onClick={showDrawer}> Open drawer </Button> <Drawer title="Multi-level drawer" width={520} closable={false} onClose={onClose} open={open}> <Button type="primary" onClick={showChildrenDrawer}> Two-level drawer </Button> <Drawer title="Two-level Drawer" width={320} closable={false} onClose={onChildrenDrawerClose} open={childrenDrawer} > This is two-level drawer </Drawer> </Drawer> </> ); }; export default App;