Layouts

All routes loaded through default layout component "src/layouts/index.js". We added a logic which manages inner layouts depends on app state, for example if user authorized and login page is loaded the app will redirect this user to needed page and will render "src/layouts/App/index.js" layout.

See BootstrappedLayout() and getLayout() functions in "src/layouts/index.js":

src\layouts\index.js
import PublicLayout from './Public'
import LoginLayout from './Login'
import MainLayout from './Main'
const Layouts = {
public: PublicLayout,
login: LoginLayout,
main: MainLayout,
}
...
const getLayout = () => {
if (pathname === '/') {
return 'public'
}
if (/^\/user(?=\/|$)/i.test(pathname)) {
return 'login'
}
return 'main'
}
const Container = Layouts[getLayout()]
const BootstrappedLayout = () => {
// show loader when user in check authorization process, not authorized yet and not on login pages
if (isUserLoading && !isUserAuthorized && !isLoginLayout) {
return <Loader />
}
// redirect to login page if current is not login page and user not authorized
if (!isLoginLayout && !isUserAuthorized) {
return <Redirect to="/system/login" />
}
// redirect to main dashboard when user on login page and authorized
if (isLoginLayout && isUserAuthorized) {
return <Redirect to="/dashboard/analytics" />
}
// in other case render previously set layout
return <Container>{children}</Container>
}
return (
<Fragment>
<Helmet titleTemplate="Air UI | %s" title="React Admin Template" />
{BootstrappedLayout()}
</Fragment>
)
...

Main layout composition

src\layouts\App\index.js
import { Layout } from 'antd'
import TopBar from 'components/layout/TopBar'
import SubBar from 'components/layout/SubBar'
import MenuLeft from 'components/layout/MenuLeft'
import MenuTop from 'components/layout/MenuTop'
import Footer from 'components/layout/Footer'
import Sidebar from 'components/layout/Sidebar'
import SupportChat from 'components/layout/SupportChat'
...
<Layout>
<Sidebar />
<SupportChat/>
{menuLayoutType === 'left' && <MenuLeft />}
{menuLayoutType === 'top' && <MenuTop />}
<Layout>
<Layout.Header>
<TopBar />
<SubBar />
</Layout.Header>
<Layout.Content style={{ height: '100%', position: 'relative' }}>
<Breadcrumbs />
<div className="air__utils__content">{children}</div>
</Layout.Content>
<Layout.Footer>
<Footer />
</Layout.Footer>
</Layout>
</Layout>
...