@tmnrp/react-sidebar NPM

@tmnrp/react-sidebar

@tmnrp/react-sidebar is a lightweight latest treanding markup to display the sidebar with menu items.

Features

Render progressbar with configurable maxWidth and minWidth
Smooth transition during expand and collapes.

Examples link

https://tmnrp.github.io/react-lib/

Installation link

$ npm i @tmnrp/react-sidebar

Properties

@tmnrp/react-sidebar is currently extended with the following properties.

Properties	type	Description
maxWidth	number	Max width after sidebar expand
maxWidth	number	Min width after sidebar expand

Implementation

import { ReactSidebar, ReactSidebarItemProps } from '../.';
import { ReactMaterialIcons, ICON_TYPES } from '@tmnrp/react-material-icons';

const App = () => {
  return (
    <div>
      <ReactSidebar defaultIsExpanded={true} sidebarItems={SIDEBAR_ITEMS} />
    </div>
  );
};
const SIDEBAR_ITEMS: ReactSidebarItemProps[] = [
  {
    name: 'settings',
    label: 'Settings',
    icon: (
      <ReactMaterialIcons iconName="settings" iconType={ICON_TYPES.filled} />
    ),
  },
  {
    name: 'home',
    label: 'home',
    icon: <ReactMaterialIcons iconName="home" iconType={ICON_TYPES.filled} />,
  },
  {
    name: 'language',
    label: 'language',
    icon: (
      <ReactMaterialIcons iconName="language" iconType={ICON_TYPES.filled} />
    ),
  },
];