| | |
| | | import { createPortal } from 'react-dom'; |
| | | import { Layout as RALayout, CheckForApplicationUpdate, useSidebarState } from "react-admin"; |
| | | import AppBar from './AppBar'; |
| | | import { MyMenu } from './MyMenu'; |
| | |
| | | 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 |
| | |
| | | } |
| | | }} |
| | | > |
| | | <Box sx={{ |
| | | position: 'fixed', |
| | | top: 48, |
| | | left: sidebarWidth + 5, |
| | | right: 0, |
| | | zIndex: 1350, // 高于 Dialog(1300),避免菜单内弹窗遮盖标签页 |
| | | transition: (theme) => |
| | | theme.transitions.create('left', { |
| | | easing: theme.transitions.easing.sharp, |
| | | duration: theme.transitions.duration.leavingScreen, |
| | | }), |
| | | }}> |
| | | <TabsBar /> |
| | | </Box> |
| | | {createPortal(tabsBarEl, document.body)} |
| | | {children} |
| | | <CheckForApplicationUpdate /> |
| | | </RALayout> |