@bolttech/atoms-side-menu

SideMenu Component

The SideMenu component is a React component designed to provide a customizable side menu navigation. This component allows users to select different menu items, which can trigger various actions.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the SideMenu component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-side-menu

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-side-menu

Once you have the required dependencies installed, you can start using the SideMenu component in your React application.

Props

The SideMenu component accepts the following props:

Prop	Type	Description
dataTestId	string	The data-testid attribute for testing purposes.
variant	light or dark	Property that will define the style of the side menu.
selected	string	The value of the submenu that should be active.
items	Array	A list of the menus that should be displayed on the side menu.

The MenuItem type consists of a set of attributes that will define the menus

Prop	Type	Description
value	string	The value of the Menu Item that will be used to return when clicked.
label	string	The label to be displayed on the Menu item.
icon	string	The icon to be displayed on a Menu Header.
notifications	string	A string that is shown as a badge on the side of a leaf
onClick	function	A function that should run on clicking on the specified menu item.
items	Array	A list of the sub-menus that should be displayed as children of this menu.

Example

Here's an example of using the SideMenu component:

const [selected, setSelected] = useState('');

<SideMenu
  selected={selected}
  variant={variant}
  dataTestId="side-menu"
  items={[
    {
      label: 'Menu 1.1',
      onClick: setSelected,
      value: 'menu1.1',
    },
    {
      label: 'Menu 1.2',
      items: [
        {
          label: 'Menu 1.2.1',
          onClick: setSelected,
          value: 'menu1.2.1',
        },
        {
          label: 'Menu 1.2.2',
          icon: 'subscriptions',
          items: [
            {
              label: 'Menu 1.2.2.1',
              onClick: setSelected,
              value: 'menu1.2.2.1',
            },
            {
              label: 'Menu 1.2.2.2',
              onClick: setSelected,
              value: 'menu1.2.2.2',
            },
          ],
        },
      ],
    },
    {
      label: 'Menu 1.3',
      onClick: setSelected,
      value: 'menu1.3',
    },
    {
      label: 'Menu 1.4',
      onClick: setSelected,
      value: 'menu1.4',
    },
  ]}
/>;

Contributing

Contributions to the SideMenu component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.