Add a Vertical Menu Component

[cruxcode]

A vertical menu component that works as shown here.

Here is the component Signature

export type MenuItemType = {
  key: string;
  label: string;
  type: "menuitem";
  children: (SubMenuType | MenuItemGroupType)[];
};

export type SubMenuType = {
  key: string;
  label: string;
  children: (SubMenuType | MenuItemGroupType)[];
  type: "submenu";
};

export type MenuItemGroupType = {
  key: string;
  label: string;
  children: { key: string; label: string }[];
  type: "group";
};

export type ItemType = MenuItemType | SubMenuType | MenuItemGroupType;

export type VerticalMenuProps = {
  styles: React.CSSProperties;
  custom: {
   items: ItemType[];
  };
};

// replace the body of this function with your code
export const VerticalMenu: React.FC<VerticalMenuProps> = React.forwardRef((ref, props) => {
  return <div></div>;
})

[Jitulteron7]

@cruxcode Plz assign me for this issue

[cruxcode]

The top-most menu items are called MenuItemType. A MenuItemType can have children of type SubMenuType or MenuItemGroupType. The difference between the two is that SubMenuType is collapsable while MenuItemGroupType are not collapsable.

[cruxcode]

@cruxcode Plz assign me for this issue

I have updated the signature. Please have a look at it again.

[cruxcode]

Relevant discussions for this issue https://github.com/Atri-Labs/atrilabs-engine/discussions/169 https://github.com/Atri-Labs/atrilabs-engine/discussions/184 https://github.com/Atri-Labs/atrilabs-engine/discussions/180 https://github.com/Atri-Labs/atrilabs-engine/discussions/186 https://github.com/Atri-Labs/atrilabs-engine/discussions/187

[Jitulteron7]

thank you

[darshitac11]

@all-contributors please add @arjundubey-cr for userTesting

[allcontributors[bot]]

@darshitac11

I've put up a pull request to add @arjundubey-cr! :tada: