Layouts

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:

  • Collapsible side - 'collapsibleSide'
  • Stacked side - 'stackedSide'
  • Top bar classic - 'topBarClassic'
  • Frameless side - 'framelessSide'
  • Content overlay - 'contentOverlay'
  • Blank - 'blank'
Configuring Layout

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

propertiesDescriptionTypeDefault
typeType of the application layout'blank' | 'collapsibleSide' | 'stackedSide' | 'topBarClassic' | 'framelessSide' | 'contentOverlay''modern'
sideNavCollapseWhether to collapse the side navigation (only only applicable when type is 'classic' or 'modern')booleanfalse
Overriding layouts

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',
        },
    },
}
Auth layouts

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