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. | | 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.