sidebar_color

for sidebar color there are 4 options given below: Values are in string.

• Property: "sidebar_color"
• Choices: "sidebar-white", "sidebar-dark", "sidebar-color", "sidebar-transparent"

Example

"sidebar_color": "sidebar-white",
choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color', 'sidebar-transparent'

sidebar_type

for sidebar type there are 3 options given below: Values are in array.

• Property: "sidebar_type"
• Choices: "sidebar-hover", "sidebar-mini", "sidebar-boxed"

Example

"sidebar_type": "sidebar-mini",
choices: 'sidebar-hover', 'sidebar-mini', 'sidebar-boxed'

sidebar_menu_style

for sidebar menu-style there are 5 options given below: Values are in string.

• Property: "sidebar_menu_style"
• Choices: "navs-rounded", "navs-rounded-all", "navs-pills", "navs-pill-all", "left-bordered"

Example

"sidebar_menu_style": "left-bordered",
choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all', 'left-bordered'

There are two ways you can change the setting of your sidebar:

With the use of live customizer

You can work on themes using Live Customizer in two different ways:

• You can change the themes with the property name and its value here by declaring property name and its values in database->seeder
  ->AppSettingTableSeeder.php file.
  -This is the example of AppSettingTableSeeder.php file.
  

  'value' => '{
      "saveLocal": "",
      "storeKey": "huisetting",
      "setting": {
          "app_name": { "value" : "Hope UI"},
          "sidebar_color": {"value" : "sidebar-white"},
          "sidebar_type" : {"value" : []},
          "sidebar_menu_style": {"value" : "left-bordered"},
      }
  }',

After making changes in seeder it is necessary to run php artisan migrate:fresh --seed to save changes in database.
• You can change sidebar from your database for that open table with name app_setting.In the cloumn name value change the value for variable ,
  sidebar_color for color , sidebar_type for type and sidebar_menu_style for style.

Manual

You can work on themes using Live Customizer in two different ways:

• By adding some classes in body tag . Example is given bellow.

Sidebar Menu Color

If you wish to change the theme, you can follow the below action.

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" data-sidebar="responsive">
    .......
</aside>

- For sidebar color as solid color

<aside class=" ...... sidebar-color" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For sidebar as Transparent

<aside class=" ...... sidebar-transparent" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For default sidebar

<aside class=" ...... sidebar-white" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

Sidebar Style

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" data-sidebar="responsive">
    .......
</aside>

- For sidebar style as hover

<aside class=" ...... sidebar-hover" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For sidebar style as boxed

<aside class=" ...... sidebar-boxed" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</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" data-sidebar="responsive">
    .......
</aside>

- For sidebar active as rounded all

<aside class=" ...... navs-rounded-all" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For sidebar active as one side pill

<aside class=" ...... navs-pill" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For sidebar active as pill all

<aside class=" ...... navs-pill-all" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>

- For sidebar active as bordered at left-side

<aside class=" ...... left-bordered" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>