init

platform/ui/src/components/AllInOneMenu/SubMenu.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback, useContext } from 'react';
+import { MenuContext, MenuProps } from './Menu';
+import Icon from '../Icon';
+
+export interface SubMenuProps extends MenuProps {
+  itemLabel: string;
+  onClick?: () => void;
+  itemIcon?: string;
+}
+
+const SubMenu = (props: SubMenuProps) => {
+  const { showSubMenu } = useContext(MenuContext);
+
+  const onClickHandler = useCallback(() => {
+    showSubMenu(props);
+    props.onClick?.();
+  }, [showSubMenu, props]);
+
+  return (
+    <div
+      className="all-in-one-menu-item all-in-one-menu-item-effects flex items-center"
+      onClick={onClickHandler}
+    >
+      {props.itemIcon && (
+        <Icon
+          name={props.itemIcon}
+          width="25px"
+          height="25px"
+          className="mr-2"
+        ></Icon>
+      )}
+      <div className="mr-auto">{props.itemLabel}</div>
+      <Icon name="content-next"></Icon>
+    </div>
+  );
+};
+
+export default SubMenu;