import { createPortal } from 'react-dom';
|
import { Layout as RALayout, CheckForApplicationUpdate, useSidebarState } from "react-admin";
|
import AppBar from './AppBar';
|
import { MyMenu } from './MyMenu';
|
import TabsBar from './TabsBar';
|
import { Box } from '@mui/material';
|
|
const LayoutContent = ({ children }) => {
|
const [sidebarIsOpen] = useSidebarState();
|
const sidebarWidth = sidebarIsOpen ? 200 : 50;
|
|
const tabsBarEl = (
|
<Box sx={{
|
position: 'fixed',
|
top: 48,
|
left: sidebarWidth + 5,
|
right: 0,
|
zIndex: 1400, // 高于 Dialog/Modal(1300)，通过 Portal 挂到 body 才能盖住弹窗
|
transition: (theme) =>
|
theme.transitions.create('left', {
|
easing: theme.transitions.easing.sharp,
|
duration: theme.transitions.duration.leavingScreen,
|
}),
|
}}>
|
<TabsBar />
|
</Box>
|
);
|
|
return (
|
<RALayout
|
appBar={AppBar}
|
menu={MyMenu}
|
sx={{
|
'& .RaLayout-content': {
|
position: 'absolute',
|
left: `${sidebarWidth}px`,
|
overflowY: 'auto',
|
width: `calc(100% - ${sidebarWidth}px)`,
|
height: 'calc(100% - 86px)', // 减去TabsBar的高度 (50px AppBar + 36px TabsBar)
|
top: '86px',
|
transition: (theme) =>
|
theme.transitions.create(['left', 'width'], {
|
easing: theme.transitions.easing.sharp,
|
duration: theme.transitions.duration.leavingScreen,
|
}),
|
}
|
}}
|
>
|
{createPortal(tabsBarEl, document.body)}
|
{children}
|
<CheckForApplicationUpdate />
|
</RALayout>
|
);
|
};
|
|
export const Layout = ({ children }) => (
|
<LayoutContent>{children}</LayoutContent>
|
);
|
