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, // 元素之间的间距
|
}
|
}}
|
>
|
{/* Logo 完全靠左 */}
|
{isLargeEnough && (
|
<Box sx={{
|
display: 'flex',
|
alignItems: 'center',
|
minWidth: 'auto', // 不限制宽度
|
}}>
|
<Logo />
|
</Box>
|
)}
|
|
{/* 弹性空间将工具栏按钮推到右侧 */}
|
<Box component="span" sx={{ flex: 1 }} />
|
</AppBar>
|
);
|
};
|
|
export default CustomAppBar;
|
