Two Column

How to use pre-built layouts?

You can change the template as per your requirements. To configure it, we will use reducer.js. you can find the file in src/slices/layouts/reducer.js in JS and src/slices/layouts/reducer.ts file in TS folder. (For Redux-Toolkit with Thunk version)

To switch the layout type in Velzon, you must specify the desired layout style as "Two-Column." This can be achieved by modifying the layoutType value within the src/Components/constants/layout.js file for JavaScript or the src/Components/constants/layout.ts file for TypeScript. Specifically, for JavaScript, update the line to read layoutType : layoutTypes.TWOCOLUMN, and for TypeScript, make the adjustment to layoutType : LAYOUT_TYPES.TWOCOLUMN in the respective file.

Theme Options

Each of the theme configuration options is provided Below, you can change their values as per you need in INIT_STATE variable located in src/slices/layouts/reducer.js file in JS and src/slices/layouts/reducer.ts file in TS. (For Redux-Toolkit with Thunk Version)

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

const INIT_STATE = {
layoutType: layoutTypes.TWOCOLUMN,
leftSidebarType: leftSidebarTypes.DARK,
layoutModeType: layoutModeTypes.LIGHTMODE,
layoutWidthType: layoutWidthTypes.FLUID,
layoutPositionType: layoutPositionTypes.FIXED,
topbarThemeType: topbarThemeTypes.LIGHT,
leftsidbarSizeType: leftsidbarSizeTypes.DEFAULT,
leftSidebarViewType: leftSidebarViewTypes.DEFAULT,
leftSidebarImageType : leftSidebarImageTypes.NONE
};

 export const initialState: LayoutState = {
layoutType: LAYOUT_TYPES.TWOCOLUMN,
layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
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,
sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
};

Topbar Colors

topbarThemeTypes.LIGHT

topbarThemeTypes.DARK

Sidebar Colors

leftSidebarTypes.LIGHT

leftSidebarTypes.DARK