Anonymous
No email available
Ecme provide 6 types of post login layouts & 3 types of auth layouts, all layouts component can be found under directory src/components/layouts/PostLoginLayout/components*and all the components used within layouts can be found under src/components/template/*
The following was the post login layouts that we had:
'collapsibleSide''stackedSide''topBarClassic''framelessSide''contentOverlay''blank'You can config the initial layout in src/configs/theme.config.ts with the string value above
export const themeConfig = {
...
layout: {
type: 'framelessSide',
...
},
}Here's available values & key for configuring the layout field
| properties | Description | Type | Default |
|---|---|---|---|
| type | Type of the application layout | 'blank' | 'collapsibleSide' | 'stackedSide' | 'topBarClassic' | 'framelessSide' | 'contentOverlay' | 'modern' |
| sideNavCollapse | Whether to collapse the side navigation (only only applicable when type is 'classic' or 'modern') | boolean | false |
In general, all route views will follow the settings of the layout in theme.config.ts. However, if there are some cases where you want to show a different layout in a certiain route view, you can the layout value you wish under the route meta to overide the current layout as we mentioned in Routing guide.
export const protectedRoutes = {
'/your-page-path': {
key: 'keyForYourPage',
authority: [ADMIN, USER],
meta: {
...
layout: 'blank',
},
},
}Configuring auth layout is slightly different from the above, just need to visit src/app/(auth-pages)/layout.tsx and replace the wrapper component. For example, switching side to simple
1import { ReactNode } from 'react'
2import Side from '@/components/layouts/AuthLayout/Side'
3import Simple from '@/components/layouts/AuthLayout/Simple'
4// import Split from '@/components/layouts/AuthLayout/Split'
5
6const Layout = ({ children }: { children: ReactNode }) => {
7 return (
8 <div className="flex flex-auto flex-col h-[100vh]">
9 <Simple>
10 <Side>
11 {children}
12 </Simple>
13 <Side/>
14 </div>
15 )
16}
17
18export default Layout