Documentation

Vue

Sidebar Appearance

File name:- /src/app/store/setting/state.ts
  1. sidebar_color
    - For sidebar color there are 4 options given below: Values are in string. 
    "sidebar_color": "sidebar-white",
choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color', 'sidebar-transparent'
  2. sidebar_type
    - For sidebar type there are 3 options given below: Values are in array. 
    "sidebar_type": "sidebar-mini",
choices: 'sidebar-hover', 'sidebar-mini', 'sidebar-boxed', 'sidebar-soft'
  3. sidebar_menu_style
    - For sidebar menu-style there are 5 options given below: Values are in string. 
    "sidebar_menu_style": "left-bordered",
choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all', 'left-bordered', 'navs-full-width'

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

With the use of live customizer
You can work on sidebar using Live Customizer in three different ways:
  1. You can change the sidebar with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file. 
    "options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting":{
        "sidebar_color": { "value" : "sidebar-white" },
        "sidebar_type" : { "value" : ["sidebar-hover", "sidebar-boxed"] },
        "sidebar_menu_style": { "value" : "left-bordered" },
    }
},
  2. Go to the live customizer and click on the 'Copy Config' button available at the top-right to copy the json file from the setting panel. Paste the copied code in the IQSetting(setting_options) at the setting-init.js file.
    - Before 
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
    - After 
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "sidebar_color": {"value": "sidebar-color"},
        "sidebar_type": {"value": ["sidebar-mini"]},
        "sidebar_menu_style": {"value": "left-bordered"},
    }
});
  3. You can change the sidebar by adding property name and its values in the <meta> tag given in <head> section.
    - This is the example of <meta> data 
    <head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting",
        "setting":{
            "sidebar_color":{"value":"sidebar-white"},
            "sidebar_type":{"value":["sidebar-hover", "sidebar-boxed"]},
            "sidebar_menu_style":{"value":"left-bordered"}"
        }
    }>
</head>
Manual
You can change the sidebar layouts with a single action.
  1. By adding some classes in sidebar parent section. Example is given bellow.

    2. Sidebar Menu Color

    If you wish to change the sidebar Menu color, 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>
    - For sidebar style as soft effect 
    <aside class=" ...... sidebar-soft" 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>
    - For sidebar active as full width 
    <aside class=" ...... navs-full-width" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
</aside>
Previous Next