React: Making a side Drawer with Ant Design

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 🙂