Vertical

Vertical menu configuration

Not applicable in FrontEnd Version

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

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.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 src/Common/constants/layout.ts file. (Please do not change the constant's value in /src/Common/constants/layout.ts file)
export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    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,
    bodyImageType: BODY_IMAGE_TYPES.NONE
};

Layout Width

LAYOUT_WIDTH_TYPES.FLUID
LAYOUT_WIDTH_TYPES.BOXED

Layout Position

LAYOUT_POSITION_TYPES.FIXED
LAYOUT_POSITION_TYPES.SCROLLABLE

Topbar Colors

LAYOUT_TOPBAR_THEME_TYPES.LIGHT
LAYOUT_TOPBAR_THEME_TYPES.DARK
LAYOUT_TOPBAR_THEME_TYPES.BRAND

Sidebar Sizes

LEFT_SIDEBAR_SIZE_TYPES.DEFAULT
LEFT_SIDEBAR_SIZE_TYPES.COMPACT
LEFT_SIDEBAR_SIZE_TYPES.SMALLICON
LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER

Sidebar View

LEFT_SIDEBAR_VIEW_TYPES.DEFAULT
LEFT_SIDEBAR_VIEW_TYPES.DETACHED

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