Documentation

Vue

Sidebar

Here is how you can change sidebar as by-default settings in gulp:

Only you have to add some classes in sidebar parent section for making default sidebar type, steps are given bellow:

  • You can change the class name from ./src/templates/partials/dashboard/sidebar.hbs file.

Sidebar Color

For example you have to set sidebar color as dark then you will have to add sidebar-dark class at aside of the sidebar.

  • For sidebar color as dark 
    <aside class="... sidebar-dark">
    .......
</aside>
  • For sidebar color as solid color 
    <aside class="... sidebar-color">
    .......
</aside>
  • For sidebar as Transparent 
    <aside class="... sidebar-transparent">
    .......
</aside>

Sidebar Types

For example you have to set sidebar type as mini then you will have to add sidebar-mini class at aside of the sidebar.

  • For sidebar type as mini 
    <aside class="... sidebar-mini">
    .......
</aside>
  • For sidebar type as hover 
    <aside class="... sidebar-hover">
    .......
</aside>
  • For sidebar type as boxed 
    <aside class="... sidebar-boxed">
    .......
</aside>

Sidebar Active Style

For example you have to set sidebar active as rounded then you will have to add navs-rounded class at aside of the sidebar.

  • For sidebar active as rounded one side 
    <aside class="... navs-rounded">
    .......
</aside>
  • For sidebar active as rounded all 
    <aside class="... navs-rounded-all">
    .......
</aside>
  • For sidebar active as one side pill 
    <aside class="... navs-pill">
    .......
</aside>
  • For sidebar active as pill all 
    <aside class="... navs-pill-all">
    .......
</aside>