packages/antd/src/components/themedLayoutV2/index.tsx
import React, { useMemo } from "react";
import { Grid, Layout as AntdLayout } from "antd";
import { ThemedSiderV2 as DefaultSider } from "./sider";
import { ThemedHeaderV2 as DefaultHeader } from "./header";
import type { RefineThemedLayoutV2Props } from "./types";
import { ThemedLayoutContextProvider } from "@contexts";
export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
children,
Header,
Sider,
Title,
Footer,
OffLayoutArea,
initialSiderCollapsed,
}) => {
const breakpoint = Grid.useBreakpoint();
const SiderToRender = Sider ?? DefaultSider;
const HeaderToRender = Header ?? DefaultHeader;
const isSmall = typeof breakpoint.sm === "undefined" ? true : breakpoint.sm;
const hasSider = !!SiderToRender({ Title });
return (
<ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
<AntdLayout style={{ minHeight: "100vh" }} hasSider={hasSider}>
<SiderToRender Title={Title} />
<AntdLayout>
<HeaderToRender />
<AntdLayout.Content>
<div
style={{
minHeight: 360,
padding: isSmall ? 24 : 12,
}}
>
{children}
</div>
{OffLayoutArea && <OffLayoutArea />}
</AntdLayout.Content>
{Footer && <Footer />}
</AntdLayout>
</AntdLayout>
</ThemedLayoutContextProvider>
);
};