import React, { useState } from 'react';
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import DirectoryDashboard from '../components/DirectoryDashboard';
import '../../public/assets/left_side_nav.css';
const { Content, Sider } = Layout;
import Sidebar from '../components/Sidebar';
import NavBar from '../components/NavBar';


const App: React.FC = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);

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

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

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