App directory #4

apps/metamigo-frontend/app/_components/layout/AppBar.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { forwardRef } from "react";
+import { AppBar, UserMenu, MenuItemLink, useTranslate } from "react-admin";
+import Typography from "@mui/material/Typography";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles({
+  title: {
+    flex: 1,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
+  spacer: {
+    flex: 1,
+  },
+});
+
+// eslint-disable-next-line react/display-name
+const ConfigurationMenu = forwardRef<any, any>((props, ref) => {
+  const translate = useTranslate();
+  return (
+    <MenuItemLink
+      ref={ref}
+      to="/configuration"
+      primaryText={translate("pos.configuration")}
+      leftIcon={<SettingsIcon />}
+      onClick={props.onClick}
+      sidebarIsOpen
+    />
+  );
+});
+
+const CustomUserMenu = (props: any) => (
+  <UserMenu {...props}>
+    <ConfigurationMenu />
+  </UserMenu>
+);
+
+const CustomAppBar = (props: any) => {
+  const classes = useStyles();
+  return (
+    <AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>
+      <Typography
+        variant="h6"
+        color="inherit"
+        className={classes.title}
+        id="react-admin-title"
+      />
+      <span className={classes.spacer} />
+    </AppBar>
+  );
+};
+
+export default CustomAppBar;