HomeWork/project/my-project/src/pages/mainPage.js

import { Layout, Menu, Breadcrumb, Row, Col, Avatar  } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import '../App.css';
import 'antd/dist/antd.min.css';
import {Switch} from 'react-router-dom';
import { CCategoryList, SwitchRoute } from '../components';
import { HeaderSite } from '../components';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

function MainPage () {

  return (
    <Layout>
     <HeaderSite/>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}/>
      <Layout className="site-layout-background" style={{ marginTop: '-2px 0' }}>
        <Sider className="site-layout-background" width={230}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
            <CCategoryList/>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content
          <Switch>
            <SwitchRoute/>
          </Switch>
        </Content>  
      </Layout>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Viktoriia Yurchenko 2022</Footer>
  </Layout>
  )
  
}

export default MainPage;