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.

Usage

The SideMenu component provides a list of menu items that users can interact with. It supports customization through various props.

To use the component, import it and include it in your JSX:

import React, {useState} from 'react';
import {SideMenu} from '@bolttech/atoms-side-menu';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  const [menuItems, setMenuItems] = useState([
    {
      idMenuItem: 'item1',
      labelContent: 'Item 1',
      icon: 'path/to/icon.svg',
      active: true,
      onClick: () => console.log('Item 1 clicked'),
    },
    {
      idMenuItem: 'item2',
      labelContent: 'Item 2',
      icon: 'path/to/icon2.svg',
      active: false,
      onClick: () => console.log('Item 2 clicked'),
    },
  ]);

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <SideMenu
        dataTestId="side-menu"
        menuItems={menuItems}
        setMenuItems={setMenuItems}
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The SideMenu component accepts the following props:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------| | dataTestId | string | The data-testid attribute for testing purposes. | | menuItems | MenuItem[] | An array of menu item objects to be displayed. | | setMenuItems | function | A callback function to update menu items. |

Example

Here's an example of using the SideMenu component:

<SideMenu
  dataTestId="side-menu"
  menuItems={[
    {
      idMenuItem: 'item1',
      labelContent: 'Item 1',
      icon: 'path/to/icon.svg',
      active: true,
      onClick: () => console.log('Item 1 clicked'),
    },
    {
      idMenuItem: 'item2',
      labelContent: 'Item 2',
      icon: 'path/to/icon2.svg',
      active: false,
      onClick: () => console.log('Item 2 clicked'),
    },
  ]}
  setMenuItems={/* update function */}
/>

This will render a SideMenu component with two menu items, one active and one inactive.

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.