Vertical
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 js/slices/layouts/reducer.ts
file.
To switch the layout type in Velzon, you must specify the desired layout style as
"Vertical." 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 for TypeScript, make the adjustment to
layoutType : LAYOUT_TYPES.VERTICAL 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.
(For Redux-Toolkit with Thunk version)
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.VERTICAL,
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
Sidebar Sizes

leftsidbarSizeTypes.DEFAULT

leftsidbarSizeTypes.COMPACT

leftsidbarSizeTypes.SMALLICON

leftsidbarSizeTypes.SMALLHOVER
Sidebar View

leftSidebarViewTypes.DEFAULT

leftSidebarViewTypes.DETACHED
Sidebar Colors

leftSidebarTypes.LIGHT

leftSidebarTypes.DARK