Two Column

You can change the template as per your requirements. To configure it, we will use reducer.ts. you can find the file in Components/slices/layouts/reducer.ts folder.

Theme Options

Each of the theme configuration options is provided Below, you can change their values as per you need in initialState variable located in Components/slices/layouts/reducer.ts file.

Note : if you are going to update any object property of initialState, make sure you use option's corresponding constant given in Components/Common/constants/layout.ts file. (Please do not change the constant's value in Components/Common/constants/layout.ts file)

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.TWOCOLUMN,
    layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
    leftSidebarType: LAYOUT_SIDEBAR_TYPES.LIGHT,
    layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
    layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
    topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
    leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
    leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
    leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
    preloader: PERLOADER_TYPES.DISABLE
};

Topbar Colors

LAYOUT_TOPBAR_THEME_TYPES.LIGHT

LAYOUT_TOPBAR_THEME_TYPES.DARK

Sidebar Colors

LAYOUT_SIDEBAR_TYPES.LIGHT

LAYOUT_SIDEBAR_TYPES.DARK

LAYOUT_SIDEBAR_TYPES.GRADIENT

LAYOUT_SIDEBAR_TYPES.GRADIENT_2

LAYOUT_SIDEBAR_TYPES.GRADIENT_3

LAYOUT_SIDEBAR_TYPES.GRADIENT_4

Sidebar Images

LEFT_SIDEBAR_IMAGE_TYPES.NONE

LEFT_SIDEBAR_IMAGE_TYPES.IMG1

LEFT_SIDEBAR_IMAGE_TYPES.IMG2

LEFT_SIDEBAR_IMAGE_TYPES.IMG3

LEFT_SIDEBAR_IMAGE_TYPES.IMG4

Preloader Option

PERLOADER_TYPES.ENABLE

PERLOADER_TYPES.DISABLE