How to use pre-built layouts?

You have the flexibility to modify the template according to your specific needs. To customize it, you can make use of the "reducer.ts" file. The file is located within the src/slices/layouts/reducer.ts directory. 

                        
export const initialState: LayoutState = {
    layoutTypes: LAYOUT_TYPES.VERTICAL,
    layoutModeTypes: LAYOUT_MODE_TYPES.LIGHT,
    layoutWidthTypes: LAYOUT_WIDTH_TYPES.FLUID,
    topbarThemeTypes: TOPBAR_THEME_TYPES.LIGHT,
    leftSidebarTypes: LEFT_SIDEBAR_TYPES.DEFAULT,
    leftSideBarThemeTypes: LEFT_SIDEBAR_THEME_TYPES.DARK,
    leftSidebarImageTypes: LEFTBAR_THEME_IMAGES_TYPES.NONE
};
Layout Type:

There are 2 types of Layout : 1. Horizontal Layout 2. Vertical Layout. please visit Layouts for more details. you would change the layoutType variable's value if you want to change layout Type.

image
Vertical Layout
layoutType: LAYOUT_TYPES.VERTICAL
image
Horizontal Layout
layoutType: LAYOUT_TYPES.HORIZONTAL
Layout Mode Types

There are 2 types of Layout Mode : 1. Light Layout 2. Dark Layout. you would change the layoutModeTypes variable's value if you want to change layout Mode.

image
Light Layout
layoutModeTypes: LAYOUT_MODE_TYPES.LIGHT
image
Dark Layout
layoutModeTypes: LAYOUT_MODE_TYPES.DARK
Layout Width

There are 2 types of Layout Width : 1. Fluid Layout Width 2. Boxed Width. you would change the layoutWidth variable's value if you want to change layout width.

image
Fluid Layout
layoutWidthTypes: LAYOUT_WIDTH_TYPES.FLUID
image
Boxed Layout
layoutWidthTypes: LAYOUT_WIDTH_TYPES.BOXED
Topbar Theme

There are 3 types of Topbar Theme : 1. Light Topbar 2. Dark Topbar 3. Colored Topbar. you would change the topbarThemeTypes variable's value if you want to change layout topbar theme color.

image
Light Topbar
topbarThemeTypes: TOPBAR_THEME_TYPES.LIGHT
image
Dark Topbar
topbarThemeTypes: TOPBAR_THEME_TYPES.DARK
image
Colored Topbar

(it's available for horizontal layout only)

topbarThemeTypes: TOPBAR_THEME_TYPES.COLORED
© Skote.