import * as React from 'react';
|
import { AppBar } from 'react-admin';
|
import { Box, useMediaQuery } from '@mui/material';
|
|
import Logo from './Logo';
|
import { AppBarToolbar } from './AppBarToolbar';
|
|
const CustomAppBar = () => {
|
const isLargeEnough = useMediaQuery(theme =>
|
theme.breakpoints.up('sm')
|
);
|
return (
|
<AppBar
|
color="secondary"
|
toolbar={<AppBarToolbar />}
|
sx={{
|
'& .RaAppBar-menuButton': {
|
display: 'none !important',
|
},
|
'& .RaAppBar-toolbar': {
|
paddingLeft: '4px !important',
|
justifyContent: 'flex-start',
|
gap: 2,
|
}
|
}}
|
>
|
{isLargeEnough && (
|
<Box sx={{
|
display: 'flex',
|
alignItems: 'center',
|
minWidth: 'auto',
|
}}>
|
<Logo />
|
</Box>
|
)}
|
<Box component="span" sx={{ flex: 1 }} />
|
</AppBar>
|
);
|
};
|
|
export default CustomAppBar;
|
