sidebar_color
"sidebar_color": "sidebar-white",
choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color'
sidebar_type
"sidebar_type": "sidebar-mini",
choices: 'sidebar-hover', 'sidebar-mini', 'sidebar-boxed'
sidebar_menu_style
"sidebar_menu_style": "left-bordered",
choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all', 'left-bordered'
With the use of live customizer
gulp.config.json
file.
gulp.config.json
file.
"options": {
"saveLocal": "sessionStorage",
"storeKey": "huisetting",
"setting": {
"sidebar_color": "sidebar-white",
"sidebar_type": [],
"sidebar_menu_style": "left-bordered"
}
},
classes
in sidebar parent section. Example is given bellow.
For example you have to set
sidebar color as
dark
then you will have to add
sidebar-dark
class at
data-toggle="main-sidebar"
of the sidebar.
- For sidebar color as dark
<aside class=" .... sidebar-dark" data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar color as color
<aside class=" .... sidebar-color" data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For default or white sidebar
<aside class=" ....default " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
If you wish to change the sidebar style, you can follow the below action.
For example you have to set sidebar style as
mini
then you will have to add
sidebar-mini
class at
data-toggle="main-sidebar"
of the sidebar
- For sidebar style as mini
<aside class=" ....sidebar-mini " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar style as hover
<aside class=" ....sidebar-hover " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar style as boxed
<aside class=" ....sidebar-boxed " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
Sidebar Active Menu Style
If you wish to change the sidebar active menu style, you can follow the below action.
For example you have to set sidebar active as rounded
then you will have to add navs-rounded
class at data-toggle="main-sidebar"
of the sidebar.
- For sidebar active as rounded one side
<aside class=" ....navs-rounded " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar active as rounded all
<aside class=" ....navs-rounded-all " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar active as one side pill
<aside class=" ....navs-pill " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar active as pill all
<aside class=" ....navs-pill-all " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>
- For sidebar active as bordered at left-side
<aside class=" ....left-bordered " data-toggle="main-sidebar" x-data="sidebar" x-bind:class="[setting.sidebar_menu_style, setting.sidebar_color, setting.sidebar_type.join(' ')]">
....
</aside>