import { Layout } from 'antd'
import { Outlet } from 'react-router-dom'
import SideNav from './SideNav'
import TopBar from './TopBar'
import './AppLayout.css'

const { Sider, Header, Content } = Layout

function AppLayout() {
  return (
    <Layout className="app-layout">
      <Sider width={220} className="app-sider">
        <SideNav />
      </Sider>
      <Layout className="app-main">
        <Header className="app-header">
          <TopBar />
        </Header>
        <Content className="app-content">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default AppLayout