frontPanel/src/pages/main.tsx

import Header from '@ui_kit/Header/Header';
import Sidebar from '@ui_kit/Sidebar';
import Box from '@mui/material/Box';
import {useTheme} from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull";

interface Props{
    sidebar: boolean,
    header?: boolean,
    page: JSX.Element
}

export default function Main ({sidebar, header, page}: Props) {
    const theme = useTheme();
    return (
        <>
            {header ? <Header/> : <HeaderFull/>}
            <Box sx={{
                display: 'flex'
            }}
            >
                {sidebar ? <Sidebar/> : <></>}
                <Box
                    sx={{
                        background: theme.palette.background.default,
                        width: '100%',
                        padding: '25px',
                        height: 'calc(100vh - 80px)',
                        overflow: 'auto',
                        boxSizing: "border-box"
                    }}
                >
                    {page}
                </Box>
            </Box>
        </>
    )
}