CODEWITHSUNDEEP
reactjsant-design-pro
Raushan Singh
Raushan Singh

Reputation: 105

How to close ant design drawer after click in-side the drawer

I have used ant design drawer to display menu items, now I want to close the drawer when someone clicks the menu item. Write now we can only close the drawer on click outside the drawer it means drawer masked area.

<Drawer
                className="draw-body"
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
            >
                
                
                
                <Nav className="mr-auto">
                    <Nav.Link  key="1" as={Link} to="/">
                        <DashboardOutlined style={{ fontSize: '18px', color: '#fff' }} /> Dashboard
                    </Nav.Link>
                    {menuList}
                </Nav>
                <Nav>
                    <Row>
                        <Col md={12}>
                            {!sidebar?(
                                <Nav.Link>
                                    <a href="#" onClick={() => handleLogout()}><LogoutOutlined style={{ fontSize: '18px', color: '#fff' }}/> Logout</a>
                                </Nav.Link>
                                
                                ) : null }
                        </Col>
                        <Col md={12}>
                            <Nav.Link  key="1" as={Link} to={routePaths.RESET_PASSWORD} style={{ color: '#fff' }}>
                                <RollbackOutlined style={{ fontSize: '18px', color: '#fff' }} />
                                <span className="menu-size"> Change Password </span>
                            </Nav.Link>
                        </Col>
                        <Col md={12}>
                            <Nav.Link  key="1" as={Link} to={props.personProfileMenu} style={{ color: '#fff' }}>
                                <Icon type="user" style={{ fontSize: '18px', color: '#fff' }}/>
                                <span className="menu-size"> My Profile </span>
                            </Nav.Link>
                        </Col>                                
                    </Row>
                </Nav>
            </Drawer>

Can anyone please suggest some method to close the drawer on click in-side drawer. enter image description here

Upvotes: 0

Views: 5833

Answers (2)

Oussama Bennabi
Oussama Bennabi

Reputation: 1

there is a good solution i came up with:

const location = useLocation();
  useEffect(() => {
    onClose(); // close your denter code hererawer when ever the url chanes
  }, [location]);

Upvotes: 0

bas
bas

Reputation: 15462

You can close the drawer by controlling the value of the visible prop on your drawer.

So the menu item that you want to hide the drawer with could handle an onClick event using a handler function that sets the value of visible to false.

I'm assuming you're using a functional component and you have a visible state and setter defined using useState like this:

const [visible, setVisible] = useState(false);

You can go about it in multiple ways, but one is to use the Button component with type text as the close drawer menu item:

<Button
  onClick={() => setVisible(false)}
  icon={<CloseOutlined style={{ fontSize: '18px', color: 'black' }} />}
  type="text">
  <span className="menu-size">Close Drawer</span>
</Button>

You could also make an icon only button on the top right corner of the drawer by setting absolute position:

<Button
  icon={<CloseOutlined />}
  onClick={() => setVisible(false)}
  type="text"
  style={{ position: 'absolute', top: 0, right: 0 }}
/>

I've used the CloseOutlined icon in this example, but replace this with whatever you want.

Upvotes: 1

Related Questions