Two Column

Two column menu configuration

In Vixon Admin & Dashboard Template, if you want to change the layout to a different style, you can do so by modifying the data-layout attribute in the src/slices/layouts/reducer.ts file by changing LAYOUT_TYPES.TWOCOLUMN.

To change the layout from the two-column layout to another style, follow these steps:

Locate the element or component where the layout is defined. Look for an element that contains the data-layout attribute.
Change the value of the data-layout attribute to the desired layout style. For example, if you want to switch to a two-column layout, set the data-layout attribute to "vertical" or "horizontal".
Save the changes and observe the updated layout. The page should now display the new layout style.

In order to add, change or remove menu items from the left side navigation, simply edit in file src/Common/LayoutMenuData.tsx. The change would reflect in all the files automatically.

LAYOUT_TYPES.TWOCOLUMN

How to use pre-built layouts?

Please do the below change in the html element at src/partials/main.html file. ex: <html data-layout-width="fluid">

Color Scheme

LAYOUT_MODE_TYPES.LIGHTMODE

LAYOUT_MODE_TYPES.DARKMODE

Topbar Colors

LAYOUT_TOP_MODE_TYPES.WARNINGMODE

LAYOUT_TOP_MODE_TYPES.SUCCESSMODE

LAYOUT_TOP_MODE_TYPES.DANGERMODE

Sidebar Types

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.DISABLE

PERLOADER_TYPES.ENABLE