Files
fateverse-react/src/layout/index.tsx
2023-11-10 14:31:25 +08:00

41 lines
1.1 KiB
TypeScript

import { useEffect } from "react";
import { Layout } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import SideBar from "./sidebar";
import Navbar from "./navbar";
import AppMain from "./appmain";
import '../assets/styles/layout.scss'
import { addRoutes, getAsyncRouters } from '../stores/permission';
const { Header, Sider, Content } = Layout;
export default function LayOut() {
const collapsed = useSelector((store: any) => store.sidebar)
const dispatch = useDispatch()
const requestAsyncRoutes = async () => {
const { payload } = await dispatch(getAsyncRouters() as any)
dispatch(addRoutes(payload))
}
useEffect(()=>{
requestAsyncRoutes()
}, [])
window.addEventListener('unload', ()=>{
requestAsyncRoutes()
})
return(
<Layout className="layout-box">
<Sider trigger={null} collapsible collapsed={collapsed}>
<SideBar/>
</Sider>
<Layout>
<Header className="navbar-box">
<Navbar/>
</Header>
<Content>
<AppMain/>
</Content>
</Layout>
</Layout>
)
}