Category Menu

🔹 Description

Category Menu is most commonly used on pages with multiple sub pages with forms, it is like a wizard setup or stepper.

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm install empower-category-menu --save

Configuration

import CategoryMenu from 'empower-category-menu';

..............

  const categoryMenu = {
        title: 'Test Menu',
        data: [
            {
                label: 'Menu 1',
                action: 'menu-1',
                status: 'standard',
                icon: SVG_LEAVES,
                subData: [
                    {
                        label: 'Menu 1 Sub Menu 1',
                        action: 'menu-1-sub-menu-1',
                        status: 'in-progress',
                        icon: SVG_LEAVES,
                    },
                    {
                        label: 'Menu 1 Sub Menu 2',
                        action: 'menu-1-sub-menu-2',
                        status: 'in-progress',
                        icon: SVG_LEAVES,
                    },
                ],
            },
            {
                label: 'Menu 2',
                action: 'menu-2',
                status: 'locked',
                icon: SVG_LEAVES
            },
            {
                label: 'Menu 3',
                action: 'menu-3',
                status: 'completed',
                icon: SVG_LEAVES
            },
            {
                label: 'Menu 4',
                action: 'menu-4',
                status: 'standard',
                icon: SVG_LEAVES
            },

            {
                label: 'Menu 5',
                action: 'menu-5',
                status: 'pending',
                icon: SVG_LEAVES
            },
        ],
        selected: 'menu-1-sub-menu-1',
        inner: true,
        loaded: true,
    }
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getContentMenuBarActions = (action, data) => {
        try {
            switch (action) {
                case 'category-menu':
                    // insert your actions here
                    break;
                default:
                    break;
            }
            setContentMenuBar({ ...contentMenuBar })
        } catch (error) {
            console.error('Error in getContentMenuBarActions()', error)
        }
    }
    
..............

  return (
    <>
      <CategoryMenu
        {...categoryMenu}
        preSelected={'menu-1-sub-menu-1'}
        getActions={(action, value) => getContentMenuBarActions(action, value)}
      />
    </>
  )

🔹 Properties

Parameter	Data Type	Constraint	Description
title	String	Required	Title of the Category Menu
data	Array	Required	Array consists of multiple objects that has keys of: label - String action - Function status - String icon - SVG subData - Array - This is the submenu for every category menu
selected	String	Optional	this is the current selected category, this value should be the same value of action of the category
preSelected	String	Optional	Same as the selected but upon initializing, this will be the active category if it is set
button	Object	Optional	Object that consists of: icon - svg label - string
isStepper	Boolean	Optional	This is a boolean, if you want broken lines connecting to each categories, make this option as true, if not, make it false.
inner	Boolean	Optional	f this is set to true, the category will have a classname of 'category-menu-inner' and empty if its false.
loaded	Boolean	Required	This is the identifier if the category menu will be display or still on loading as some of the category might be from an external api return.
getActions	Function	Required	This is the function that will be called upon onclick on each category.

🔹 References

Repository Link: https://bitbucket.org/empowerteams/empower-category-menu/src/master/

NPM Package: https://www.npmjs.com/package/empower-category-menu

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git