55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
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;
|