react-responsive-sidebar-menu

Required

• react-router-dom@^6.0.2

Installation

# npm
npm i react-responsive-sidebar-menu --save
# yarn
yarn add react-responsive-sidebar-menu

Usage

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";
export default class App extends Component {
  menuItems = [
    {
      path: "/",
      text: "Dashboard",
      tooltip: "Dashboard",
      icon: "bx bx-grid-alt",
    },
    {
      path: "/users",
      text: "Users",
      tooltip: "Users",
      icon: "bx bx-user",
    },
    {
      path: "/users",
      text: "Messages",
      tooltip: "Messages",
      icon: "bx bx-chat",
    },
    {
      path: "/users",
      text: "Settings",
      tooltip: "Settings",
      icon: "bx bx-cog",
    },
  ];
  options = {
    title: "React RSB",
    icon: "bx bxl-react icon",
    logo: "https://lucassenarj.github.io/favicon.ico",
  }
  user={
    name: "Lucas Sena",
    avatar: "https://lucassenarj.github.io/images/author.jpg",
    status: "Frontend developer",
    onLogout: () => console.log("logout"),
  }
  render() {
    return (
      <ResponsiveSidebar
        menuItems={this.menuItems}
        options={this.options}
        user={this.user}
      />
    );
  }
}

Props

| Prop | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | | menuItems | An array of objects which acts as the source of data for the menu. This prop is required | | menuItems.path | Path when users will be redirected when clicked on a menu item. This prop is required | | menuItems.text | Text which act as name or title for menu items. This prop is required | | menuItems.tooltip | Text which act as tooltip when sidebar is closed for menu items. This prop is required | | menuItems.icon | Boxicon class name. This prop is required | | options | Object which acts as source for project settings. This prop is required | | options.title | Project or company title. This prop is required | | options.icon | Boxicon path for company or project icon | | options.logo | Image path company or project logo | | user | Object which acts as source for user. This prop is required | | user.name | User name. This prop is required | | user.avatar | User picture, image, or avatar. This prop is required | | user.status | User subtitle or user role. This prop is required | | user.onLogout | A function which acts as a callback when the logout button is click. This prop is required |

Built With

• React - A JavaScript library for building user interfaces
• React-Router-Dom - React Router DOM enables you to implement dynamic routing in a web app.
• BoxIcons - Free collection of carefully crafted open source icons

License

MIT Licensed. Copyright (c) Lucas Sena 2021.