[FEAT] ThemedLayoutV2 Control Over Children

[aress31]

Is your feature request related to a problem? Please describe.

Right now it is not possible to control the children fully, for example background color and padding as children is already wrapped by a styled Box, see:

import React from "react";

import Box from "@mui/material/Box";

import { ThemedLayoutContextProvider } from "@contexts";
import { ThemedSiderV2 as DefaultSider } from "./sider";
import { ThemedHeaderV2 as DefaultHeader } from "./header";
import type { RefineThemedLayoutV2Props } from "./types";

export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
  Sider,
  Header,
  Title,
  Footer,
  OffLayoutArea,
  children,
  initialSiderCollapsed,
}) => {
  const SiderToRender = Sider ?? DefaultSider;
  const HeaderToRender = Header ?? DefaultHeader;

  return (
    <ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
      <Box display="flex" flexDirection="row">
        <SiderToRender Title={Title} />
        <Box
          sx={[
            {
              display: "flex",
              flexDirection: "column",
              flex: 1,
              minWidth: "1px",
              minHeight: "1px",
            },
          ]}
        >
          <HeaderToRender />
          <Box
            component="main"
            sx={{
              p: { xs: 1, md: 2, lg: 3 },
              flexGrow: 1,
              bgcolor: (theme) => theme.palette.background.default,
            }}
          >
            {children}
          </Box>
          {Footer && <Footer />}
        </Box>
        {OffLayoutArea && <OffLayoutArea />}
      </Box>
    </ThemedLayoutContextProvider>
  );
};

Describe alternatives you've considered

Provide full control over children rendering.

Additional context

The only thing to do is to delete the wrapping Box component.

Describe the thing to improve

See above.

[aress31]

Whilst at it might as well make the siderbar and header conditional rendering like the footer, this way there will be no need to do something like:

<ThemedLayoutV2 Header={CustomHeader} Sider={() => null}>

[alicanerdurmaz]

Hello, @aress31, Nice catch! thanks.

I believe <ThemedLayoutV2 /> can take new props called childrenBoxProps and containerBoxProps (I'm fully open to better names) to customize these <Box /> components.

Do you want to work on this?

[aress31]

Why not remove the Box entirely? If a user needs it, they can wrap the content like this:

<Box
    component="main"
    sx={{
        p: { xs: 1, md: 2, lg: 3 },
        flexGrow: 1,
        bgcolor: (theme) => theme.palette.background.default,
    }}
>

Feel free to assign it to me. For the PR, do you create the branch, or should I create it with the issue number?

[alicanerdurmaz]

@aress31 You have a point but If we remove <Box /> right now it causes breaking changes. So, because of that, we can't remove it.

You can create the branch ofc and we have contributing guide. Feel free to ask any questions if you encounter any problems. 🚀