Horizontal

How to use pre-built layouts?

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

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 js/Components/constants/layout.ts file for TypeScript. Specifically, for JavaScript, update the line to read 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 js/slices/layouts/reducer.ts file.

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

 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