Vertical menu configuration
How to change width?
- Vuejs
- In order to change the width of left side navigation
bar, open a file
src/assets/scss/_variables.scssand change the value of variable$sidebar-width. The default value is set to250px. - Laravel-vue
-
In order to change the width of left side navigation
bar, open a file
resources/saas/_variables.scssand change the value of variable$sidebar-width. The default value is set to250px.
How to use pre-built layouts?
Vuejs
Each of the layout options is provided below with
steps you would need to
perform in src/modules/layout.js:
Light Sidebar & Topbar Dark
SetleftSidebarType: "light" to have
Light Sidebar & Topbar
Dark.
Compact Sidebar
SetleftSidebarType: "compact" to have
compact sidebar.
Icon Sidebar
Set leftSidebarType: "icon" to have icon
sidebar.
Boxed Layout
Set layoutWidth: "boxed" to have boxed
layout.
Colored Sidebar
Set leftSidebarType: "colored" to have
boxed layout.
Scrollable
Set layoutWidth: "scrollable" to have
boxed layout.
Laravel-Vue
If you would like to have Vertical Menu based layout, simply set
vertical in the file
resources/js/mixins/layouts.mixin.js line number 5
type: "vertical".
Each of the layout options are provided as below with steps you
would need to perform in
resources/js/mixins/layouts.mixin.js update
default case for layout:
Light Sidebar & Topbar Dark
sidebar: "light"
Compact Sidebar
sidebar: "compact"
Icon Sidebar
sidebar: "icon"
Boxed Layout
width: "boxed"
Colored Sidebar
sidebar: "colored"
Scrollable
sidebar: "scrollable"