rc-material-sidebar

rc-material-sidebar is a lightweight React component designed to streamline the implementation of a sidebar navigation system with support for collapsing and expanding views. This component is ideal for applications requiring a sidebar that can toggle between a compact (collapsed) and expanded state, enhancing user experience and optimizing screen real estate.

Installation

You can easily install rc-material-sidebar via your packeage manager.

npm install rc-material-sidebar
yarn add rc-material-sidebar

Usage

import Sidebar from "rc-material-sidebar";
const items = [
  {
    key: "1", //unique
    label:"First Menu"
    link:"/yourpath"
    icon:<MailIcon/>//material icon
  },
  {
     key: "2", //unique
    label:"Second Menu" // have childrens
    icon:<MailIcon/>//material icon
    children:[
      {
        key: "3", //unique
        label:"child menu one"
        link:"/yourpath"
        icon:<MailIcon/>//material icon
      },
      {
        key: "4", //unique
        label:"child menu two"
        link:"/yourpath"
        icon:<MailIcon/>//material icon
      }
    ]

  }
];
const onClick = (e, item) => {
  console.log(e, item)
}
 <style>
.sidebarMenu {
  overflow: hidden;
}
.sidebarMenu > li > a.active .MuiTypography-root,
.active-menu .MuiTypography-root {
  font-weight: 500;
  color: var(--colorPrimary);
}

.sidebarMenu > li > a.active,
.active-menu {
  background: rgb(from var(--colorPrimary) r g b / 7%);
}
</style>
return (
  <Sidebar
    items={items}
    variant={open ? "full" : "mini"}
    onClick={onClick}
    //
  />
);

Features

Collapse and Expand : Easily switch between a compact (collapsed) and expanded view of the sidebar. Flexible Integration: Seamlessly integrate into React applications to enhance navigation functionality. Customizable: Configure appearance and behavior to suit your application's design and user experience needs.

rc-material-sidebar