Multilevel Sidebar In React Js

React-Multilevel-Sidebar is a sidebar element for responsive mobile and web layouts that provides you with nested level menus so you may organize your things.

First, we should install react multilevel sidebar in our application

npm i react-multilevel-sidebar

Import this package into our application

import MultilevelSidebar from "react-multilevel-sidebar"; 
import "react-multilevel-sidebar/src/Sidebar.css";

Below you can see how to use multi-sidebar in our application

import React, { Component } from "react";
import MultilevelSidebar from "react-multilevel-sidebar";
import "react-multilevel-sidebar/src/Sidebar.css";

let options = [
  {
    title: "MenuItem1",
    titleIcon: <i className="fa fa-graduation-cap"></i>,
    content: [{ id: 1, name: "My courses", to: "/my-courses" }]
  },
  {
    title: "MenuItem2",
    titleIcon: <i className="fa fa-graduation-cap"></i>,
    hideBorder: true,
    content: [
      {
        id: 2,
        name: "MenuContent",
        icon: <i className="fa fa-graduation-cap"></i>,
        children: [
          {
            title: "MenuSubItem1",
            titleIcon: <i className="fa fa-opera"></i>,
            content: [
              {
                id: 3,
                name: "functions",
                ["Some property i need on clicking this"]: "value"
              }
            ]
          }
        ]
      }
    ]
  }
];

class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
      isOpen: false
    };
  }

  //   you can also use this function on any of your event to open/close the sidebar
  handleSidebarToggle = isOpen => {
    this.setState({ isOpen });
  };

  handleClick = itemOptions => {
    /* 
        do something with the item you clicked.
        you can also send custom properties of your choice
        in the options array you'll be getting those here
        whenever you click that item
    */
  };

  render() {
    return (
      <div>
        <MultilevelSidebar
          open={this.state.isOpen}
          onToggle={this.handleSidebarToggle}
          options={options}
          header="React-MultiLevel-Sidebar"
          onItemClick={this.handleClick}
        />
        {/* using in our button to open the sidebar */}
        <button onClick={() => this.handleSidebarToggle(true)}>open sidebar</button>
      </div>
    );
  }
}

export default MyComponent;

You can see below output