import React, { useState } from 'react';
import Calendar from '../components/Calendar';
import Sidebar from '../components/Sidebar';
import NavBar from '../components/NavBar';
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import '../../public/assets/left_side_nav.css';
const { Content, Sider } = Layout;
const App: React.FC = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);

    const toggleSidebar = () => {
        setIsCollapsed(!isCollapsed);
      };


    return (
        <Layout>
            <Layout>
                {/* <Sidebar />
                <Layout style={{ marginLeft: 366, background: '#FFF' }}> */}
                 <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
                <Layout style={{ marginLeft: isCollapsed ? 80 : 366, transition: 'margin-left 0.2s ease' }}>
               
              
                    <Content style={{ overflow: 'initial', }}>
                        <NavBar />
                        <section className='grid grid-cols-1 xl:grid-cols-1 gap-y-6 border-[2px] border-[#CFCFCF]'>
                            <Calendar />
                        </section>
                    </Content>

                </Layout>

            </Layout>
        </Layout>
    );
};
export default App;