Sidebar Configuration

The menu(sidebar) hide style values are of array of strings type and can be configured as follows:

Menu Hide
  • Property: "sidebar_show"
  • Choices: "sidebar-none"

Example

"sidebar_show": { "value" : [] }

The sidebar color value are of string type and can be configured as follows:

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

Example

"sidebar_color": { "value" : "sidebar-white" }

The sidebar values are of string type and can be configured as follows:

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

Example

"sidebar_type": { "value" : [] }
Sidebar Menu Style
  • Property: "sidebar_menu_style"
  • Choices: "left-bordered", "navs-rounded", "navs-rounded-all", "navs-pill", "navs-pill-all", "navs-full-width"

Example

"sidebar_menu_style": { "value": "left-bordered" }

Changing Sidebar Settings

There are two ways to change the sidebar settings:

1. Using the Live Customizer

You can work on navbar using the Live Customizer in three different ways:

a. By Declaring Properties in gulp.config.json

Example gulp.config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "sidebar_show": { "value": [ "sidebar-none" ] },
        "sidebar_color": { "value": "sidebar-white" },
        "sidebar_type": { "value": [] },
        "sidebar_menu_style": { "value": "left-bordered" },
    }
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Replace the copied code into the options object in the gulp.config.json file.
Before:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "sidebar_show": { "value": [] },
        "sidebar_color": { "value": "sidebar-white" },
        "sidebar_type": { "value": [] },
        "sidebar_menu_style": { "value": "left-bordered" },
    }
},
After:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "sidebar_show": { "value": [ "sidebar-none" ] },
        "sidebar_color": { "value": "sidebar-dark" },
        "sidebar_type": { "value": [] },
        "sidebar_menu_style": { "value": "navs-pill-all" },
    }
},
c. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting-html",
        "setting":{
            "sidebar_show": { "value": [ "sidebar-none" ] },
            "sidebar_color": { "value": "sidebar-white" },
            "sidebar_type": { "value": [ "sidebar-mini" ] },
            "sidebar_menu_style": { "value": "navs-pill-all" },
        }
    }>
</head>
1. Manual Configuration

You can change the sidebar type with a single action by adding the appropriate classes to the <aside> tag.

Sidebar Visibility

To change the Sidebar Visibility, set the class in aside:

  • Sidebar Hide:
    • <aside class="sidebar-none">
     .......
</aside>
Sidebar Color

To change the sidebar Color, set the class in aside:

  • Sidebar Light:
    • <aside class="sidebar-white">
    .......
</aside>
Sidebar Type

To change the sidebar type, set the class in aside:

  • Sidebar Mini:
    • <aside class="sidebar-mini">
    .......
</aside>
Sidebar Menu Style

To change the sidebar menu style, set the class attribute in the <aside> tag:

  • Nav Pills All:
    • <aside class="nav-pills-all">
    .......
</html>
Previous Next