Sidebar

  • To get the default value of Sidebar Style, navigate to this pathsrc/app/store/setting/state.ts
sidebar_color
  • Property: "sidebar_color"
  • Choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color', sidebar-transparent"

Example

sidebar_color: {
    value: 'sidebar-white'
}
sidebar_type
  • Property: "sidebar_type"
  • Choices: "sidebar-hover", "sidebar-mini", "sidebar-boxed"
  • Values are in array

Example

sidebar_type: {
    value: []
}
sidebar_menu_style
  • Property: "sidebar_menu_style"
  • Choices: "sidebar-default navs-rounded", "sidebar-default navs-rounded-all", "sidebar-default navs-pill", "sidebar-default navs-pill-all", "left-bordered"
  • Values are in string

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 sidebar using the Live Customizer in two different ways:

a. By Declaring Properties in state.ts

Example state.ts:

"export const initialState: SettingState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting-angular",
  "setting": {
    "sidebar_color": {
      "value": "sidebar-white"
    },
    "sidebar_type": {
      "value": []
    },
    "sidebar_show": {
      "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 state.ts file.
Before:
"export const initialState: SettingState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting-angular",
  "setting": {
    "sidebar_color": {
      "value": "sidebar-white"
    },
    "sidebar_type": {
      "value": []
    },
    "sidebar_show": {
      "value": []
    },
    "sidebar_menu_style": {
      "value": "left-bordered"
    },
  }
},
After:
"export const initialState: SettingState = {
  "saveLocal": "sessionStorage",
  "storeKey": "huisetting-angular",
  "setting": {
    "sidebar_color": {
      "value": "sidebar-dark"
    },
    "sidebar_type": {
      "value": []
    },
    "sidebar_show": {
      "value": []
    },
    "sidebar_menu_style": {
      "value": "sidebar-default navs-pill-all"
    },
  }
},
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