Move metamigo assets to metamigo-add

apps/link/metamigo-add/_components/layout/SubMenu.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { FC, PropsWithChildren, Fragment, ReactElement } from "react";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import List from "@mui/material/List";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Typography from "@mui/material/Typography";
+import Collapse from "@mui/material/Collapse";
+import Tooltip from "@mui/material/Tooltip";
+// import { makeStyles } from "@mui/styles";
+import { useTranslate } from "react-admin";
+
+/*
+const useStyles = makeStyles((theme: any) => ({
+  icon: { minWidth: theme.spacing(5) },
+  sidebarIsOpen: {
+    "& a": {
+      paddingLeft: theme.spacing(4),
+      transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+    },
+  },
+  sidebarIsClosed: {
+    "& a": {
+      paddingLeft: theme.spacing(2),
+      transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+    },
+  },
+}));
+*/
+type SubMenuProps = PropsWithChildren<{
+  dense: boolean;
+  handleToggle: () => void;
+  icon: ReactElement;
+  isOpen: boolean;
+  name: string;
+  sidebarIsOpen: boolean;
+}>;
+
+export const SubMenu: FC<SubMenuProps> = ({
+  handleToggle,
+  sidebarIsOpen,
+  isOpen,
+  name,
+  icon,
+  children,
+  dense,
+}: any) => {
+  const translate = useTranslate();
+  const classes: any = {}; // = useStyles();
+
+  const header = (
+    // @ts-ignore
+    <MenuItem dense={dense} button onClick={handleToggle}>
+      <ListItemIcon className={classes.icon}>
+        {isOpen ? <ExpandMore /> : icon}
+      </ListItemIcon>
+      <Typography variant="inherit" color="textSecondary">
+        {translate(name)}
+      </Typography>
+    </MenuItem>
+  );
+
+  return (
+    <Fragment>
+      {sidebarIsOpen || isOpen ? (
+        header
+      ) : (
+        <Tooltip title={translate(name)} placement="right">
+          {header}
+        </Tooltip>
+      )}
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List
+          dense={dense}
+          component="div"
+          disablePadding
+          className={
+            sidebarIsOpen ? classes.sidebarIsOpen : classes.sidebarIsClosed
+          }
+        >
+          {children}
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+};