Vertical

How to use pre-built layouts?

You can change the template as per your requirements. To configure it, we will use reducer.ts and change the value of export const initialState: LayoutState object. you can find the file src/slices/layouts/reducer.ts file.

Theme Options

export const initialState: LayoutState = {
    layoutType: LAYOUT_TYPES.VERTICAL,
    layoutThemeType: LAYOUT_THEME.DEFAULT,
    layoutThemeColorType: LAYOUT_THEME_COLOR.DEFAULT,
    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

image layoutWidthType.FLUID
image layoutWidthType.BOXED

Layout Position

layoutPositionType.FIXED
layoutPositionType.SCROLLABLE

Topbar Colors

image topbarThemeType.LIGHT
image topbarThemeType.DARK

Sidebar Sizes

image leftsidbarSizeType.DEFAULT
image leftsidbarSizeType.COMPACT
image leftsidbarSizeType.SMALLICON
image leftsidbarSizeType.SMALLHOVER

Sidebar View

image leftSidebarViewType.DEFAULT
image leftSidebarViewType.DETACHED

Sidebar Colors

image leftSidebarType.LIGHT
image leftSidebarType.DARK