this is a reactJS app.js file, there's a problem with the sider on mobile screens, figure it out.
"import 'antd/dist/reset.css';
import './components/index.css'
import {
    LoginOutlined,
    MenuOutlined,
    CloseOutlined,
    UploadOutlined,
    MailOutlined,
    WalletOutlined,
    MobileOutlined,
    UserAddOutlined,
    ArrowRightOutlined,
    DownOutlined,
    LockOutlined,
    GoogleOutlined,
    UserOutlined,
    VideoCameraOutlined, } from '@ant-design/icons';
import { Layout, Button, Typography, Row, Col, Divider, Menu, Modal, Tabs, Form, Input, Checkbox, ConfigProvider, Space } from 'antd';
import { useState, useEffect } from 'react';
import heroimg from './hero.png';

const App = () => {

    const [collapsed, setCollapsed] = useState(true);

    const [size, setSize] = useState('large');

    const { Title } = Typography;

    const TabPane = Tabs.TabPane

    const { Header, Sider, Content, Footer } = Layout;

    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('Content of the modal');
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        setModalText("");
        setConfirmLoading(true);
        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setOpen(false);
    };

        return (
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#5E4AE3',
                    },
                }}
            >
                <Layout>
                    <Sider collapsedWidth="0" trigger={null} collapsible collapsed={collapsed} style={{ border: '0', backgroundColor: '#000000' }}>
                        <Menu
                            theme="dark"
                            mode="inline"
                            style={{ backgroundColor: '#000000' }}
                            defaultSelectedKeys={['1']}
                            items={[
                                {
                                    key: '1',
                                    icon: <UserOutlined />,
                                    label: 'nav 1',
                                },
                                {
                                    key: '2',
                                    icon: <VideoCameraOutlined />,
                                    label: 'nav 2',
                                },
                                {
                                    key: '3',
                                    icon: <UploadOutlined />,
                                    label: 'nav 3',
                                },
                            ]}
                        />
                    </Sider>
                    <Layout className="layout" direction="rtl">
                        <Header style={{ borderBottom: 'solid 2px #1e1e1e', paddingInline: '0', backgroundColor:'#121212' }}>
                            <Row style={{ display: 'flex', justifyContent: 'space-between', border: '0' }} align="middle">
                                <Col style={{}}>
                                    <Row style={{ flexWrap: "nowrap" }}>
                                        <Button
                                            type="text"
                                            icon={collapsed ? <MenuOutlined /> : <CloseOutlined />}
                                            onClick={() => setCollapsed(!collapsed)}
                                            style={{
                                                fontSize: '16px',
                                                width: 64,
                                                height: 64,
                                                color: '#5E4AE3',
                                                whiteSpace: 'nowrap'
                                            }}
                                        />
                                        <Title style={{ whiteSpace: 'nowrap', color: '#DDDCDC', paddingTop: '12px' }} level={3}>CryptoTasky</Title>
                                    </Row>
                                </Col>
                                <Col style={{ marginLeft: '10px', position: 'absolute', left: '0' }}>
                                    <Button style={{ color: '#f5f5f5' }} type="primary" shape="round" icon={<LoginOutlined />} size={size} className="hidden-sm" onClick={showModal}>
                                        تسجيل / تسجيل دخول
                                    </Button>
                                    <Button style={{ color: '#f5f5f5' }} type="primary" shape="round" icon={<LoginOutlined />} size={size} className="visible-sm" onClick={showModal}>
                                    </Button>
                                    
                                </Col>
                            </Row>
                        </Header>
                        <Divider style={{ margin: '0', backgroundColor: '#262626' }} />
                        <Content style={{ backgroundColor: '#121212', border: '0' }}>
                            <div className="site-layout-content" style={{ background: '#121212', border: '0' }}>
                                <div className="hero-section container" style={{ color: '#DDDCDC' }}>
                                    <Row justify="space-around" align="middle">
                                        <Col xs={24} sm={24} md={12} style={{ marginTop:'30px' }}>
                                            <p style={{ color: '#5E4AE3', padding: '0' }}>
                                                زد من دخلك
                                            </p>
                                            <Title level={1} style={{ color: '#DDDCDC', marginTop: '-10' }}>قم بالمهام البسيطة وتقاضى الأجر!</Title>
                                            <p style={{ color: '#DDDCDC' }}>
                                                كل ما عليك فعله هو تقييم الخدمات التجارية عبر الإنترنت وسندفع لك المال مقابل كل تقييم تقوم به،
                                                <br />
                                                فقط قم بعمل حساب جديد ويمكنك البدء في تنفيذ المهام على الفور!
                                            </p>
                                            <Space size="small">
                                                <Button type="primary" shape="round" size="large" icon={<ArrowRightOutlined />} onClick={showModal}>
                                                    سجّل الأن
                                                </Button>
                                                <space />
                                                <Button shape="round" size="large" icon={<DownOutlined />} style={{ backgroundColor: 'transparent', color: '#DDDCDC' }}>
                                                    المزيد
                                                </Button>
                                            </Space>                                          
                                        </Col>
                                        <Col xs={24} sm={24} md={12} style={{ marginTop: '30px' }}>
                                            <img src={heroimg} alt="كريبتو تاسكي" style={{ width: "100%", maxHeight: '400px', objectFit: "cover" }} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </Content>
                        <Divider style={{ margin: '0', backgroundColor: '#262626' }} />
                        <Footer style={{ textAlign: 'center', backgroundColor: '#1e1e1e', border: '0' }}>كل الحقوق محفوظة لموقع Cryptotasky ©لسنة 2023</Footer>
                    </Layout>
                </Layout>
                <Modal
                    open={open}
                    onOk={handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                    footer={[null]}
                >
                    <Tabs style={{ backgroundColor: '#1e1e1e', color: '#F5F5F5' }} defaultActiveKey="1" centered >
                        <TabPane
                            tab={
                                <span>
                                    <LoginOutlined style={{ padding: '0 0 0 5' }} />
                                    تسجيل دخول
                                </span>
                            }
                            key="1"
                        >
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{
                                    remember: true,
                                }}
                                style={{ paddingTop: '60px;' }}
                            >
                                <Form.Item
                                    name="إسم المُستخدم"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل إسم المُستخدم',
                                        },
                                    ]}
                                >
                                    <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="إسم المُستخدم" />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل كلمة المرور',
                                        },
                                    ]}
                                >
                                    <Input
                                        size="large"
                                        prefix={<LockOutlined className="site-form-item-icon" />}
                                        type="password"
                                        placeholder="كلمة المرور"
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>تذكرني</Checkbox>
                                    </Form.Item>

                                    <a className="login-form-forgot" href="">
                                        نسيت كلمة المرور؟
                                    </a>
                                </Form.Item>

                                <Form.Item className="justify-end">
                                    <Button style={{ width: '100%' }} size="large" shape="round" icon={<LoginOutlined />} type="primary" htmlType="submit" className="login-form-button">
                                        تسجيل دخول
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                        <TabPane
                            tab={
                                <span>
                                    <UserAddOutlined style={{ padding: '0 0 0 5' }} />
                                    تسجيل حساب
                                </span>
                            }
                            key="2"
                        >
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{
                                    remember: true,
                                }}
                            >
                                <Form.Item
                                    name="إسم المُستخدم"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل إسم المُستخدم',
                                        },
                                    ]}
                                >
                                    <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                                </Form.Item>
                                <Form.Item
                                    name="البريد الإلكتروني"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل البريد الإلكتروني',
                                        },
                                    ]}
                                >
                                    <Input size="large" prefix={<MailOutlined className="site-form-item-icon" />} placeholder="Example@email.com" />
                                </Form.Item>
                                <Form.Item
                                    name="رقم الهاتف"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل رقم الهاتف',
                                        },
                                    ]}
                                >
                                    <Input size="large" type="Email" prefix={<MobileOutlined className="site-form-item-icon" />} placeholder="+X XXX XXX XXXX" />
                                </Form.Item>
                                <Form.Item
                                    name="رقم المحفظة TRX"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل رقم المحفظة',
                                        },
                                    ]}
                                >
                                    <Input size="large" prefix={<WalletOutlined className="site-form-item-icon" />} placeholder="TBia4uHnb3oSSZm5isP284cA7Np1v15Vhi" />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'من فضلك أدخل كلمة المرور',
                                        },
                                    ]}
                                >
                                    <Input
                                        prefix={<LockOutlined className="site-form-item-icon" />}
                                        type="password"
                                        size="large"
                                        placeholder="كلمة المرور"
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>تذكرني</Checkbox>
                                    </Form.Item>

                                    <a className="login-form-forgot" href="">
                                        نسيت كلمة المرور؟
                                    </a>
                                </Form.Item>

                                <Form.Item>
                                    <Button style={{ width: '100%' }} size="large" shape="round" icon={<UserAddOutlined />} type="primary" htmlType="submit" className="login-form-button">
                                        تسجيل حساب
                                    </Button>
                                </Form.Item>
                            </Form>
                        </TabPane>
                    </Tabs >
                </Modal>
            </ConfigProvider>
        );
    };
export default App;"