Horizontal

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 "Horizontal". 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.HORIZONTAL, and for TypeScript, make the adjustment to layoutType : LAYOUT_TYPES.HORIZONTAL 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.HORIZONTAL,
    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.HORIZONTAL,
    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
 };

Layout Width

layoutWidthTypes.FLUID

layoutWidthTypes.BOXED

Layout Position

layoutPositionTypes.FIXED

layoutPositionTypes.SCROLLABLE

Topbar Colors

topbarThemeTypes.LIGHT

topbarThemeTypes.DARK