Vertical
Vertical menu configuration
In some theme types of Vixon Admin & Dashboard Template, the vertical
layout is set as
the default layout. However, 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.VERTICAL.
To change the layout from the default vertical 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 horizontal layout, set the data-layout attribute to "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.
How to use pre-built layouts?
Color Scheme
LAYOUT_MODE_TYPES.LIGHTMODE
LAYOUT_MODE_TYPES.DARKMODE
Layout Width
LAYOUT_WIDTH_TYPES.FLUID
LAYOUT_WIDTH_TYPES.BOXED
Layout Position
LAYOUT_POSITION_TYPES.FIXED
LAYOUT_POSITION_TYPES.SCROLLABLE
Topbar Colors
LAYOUT_TOP_MODE_TYPES.WARNINGMODE
LAYOUT_TOP_MODE_TYPES.SUCCESSMODE
LAYOUT_TOP_MODE_TYPES.DANGERMODE
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 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