/
index.tsx
49 lines (46 loc) · 1.47 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React from "react";
import { Box } from "@mantine/core";
import { RefineThemedLayoutV2Props } from "./types";
import { ThemedSiderV2 as DefaultSider } from "./sider";
import { ThemedHeaderV2 as DefaultHeader } from "./header";
import { ThemedLayoutContextProvider } from "../../contexts";
export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
Sider,
Header,
Title,
Footer,
OffLayoutArea,
initialSiderCollapsed,
children,
}) => {
const SiderToRender = Sider ?? DefaultSider;
const HeaderToRender = Header ?? DefaultHeader;
return (
<ThemedLayoutContextProvider
initialSiderCollapsed={initialSiderCollapsed}
>
<Box sx={{ display: "flex" }}>
<SiderToRender Title={Title} />
<Box
sx={{
display: "flex",
flexDirection: "column",
flex: 1,
}}
>
<HeaderToRender />
<Box
component="main"
sx={(theme) => ({
padding: theme.spacing.sm,
})}
>
{children}
</Box>
{Footer && <Footer />}
</Box>
{OffLayoutArea && <OffLayoutArea />}
</Box>
</ThemedLayoutContextProvider>
);
};