React: Making a side Drawer with Ant Design
(27 Articles)
This article shows you how to implement a simple side drawer navigation in React by using the Ant Design library.
Getting Started
Run the following command to install Ant Design and its icon kit:
npm install antd @ant-design/icons
Import Ant Design components and css file in to our Javascript code:
import { Drawer, Button, Divider } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
The complete code with explanations:
import React, { useState } from 'react';
import { Drawer, Button, Divider } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
const App = () => {
// The drawer is invisible by default
const [isVisible, setIsVisible] = useState(false);
// trigger this function to open the drawer
const showDrawer = () => {
setIsVisible(true);
};
// close the drawer
const closeDrawer = () => {
setIsVisible(false);
};
return (
<>
<nav style={styles.nav}>
<Button shape="circle" style={styles.button} onClick={showDrawer}>
<MenuOutlined />
</Button>
</nav>
<Drawer
visible={isVisible}
onClose={closeDrawer}
placement="left"
title="My Drawer"
>
<p>Menu Item #1</p>
<Divider />
<p>Menu Item #2</p>
<Divider />
<p>Menu Item #3</p>
<Divider />
<p>Menu Item #4</p>
<Divider />
<p>Menu Item #5</p>
<Divider />
<p>Menu Item #6</p>
<Divider />
<p>Menu Item #7</p>
</Drawer>
</>
);
};
// Styling
const styles = {
nav: {
height: 50,
background: '#096dd9',
boxShadow: '0 5px 10px rgba(0, 0, 0, 0.15)',
display: 'flex',
alignItems: 'center',
},
button: {
background: 'transparent',
border: 'none',
outline: 'none',
color: 'white',
fontSize: 16,
},
};
export default App;
That’s it. Happy coding 🙂
Related Articles
0 Comments