Documentation

Sidebar

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

  • You will found sidebar in ./src/components/custom/sidebar/DefaultSidebar.vue file

<template>
   <aside :class="`sidebar sidebar-default ${sidebarColor} ${sidebarMenuStyle} ${sidebarType.join(' ')}`" id="first-tour" data-toggle="main-sidebar" data-sidebar="responsive">
    <div class="sidebar-header d-flex align-items-center justify-content-start">
      <router-link :to="{ name: 'default.dashboard' }" class="navbar-brand">
        <brand-logo></brand-logo>
        <h4 class="logo-title" data-setting="app_name">
          <brand-name></brand-name>
        </h4>
      </router-link>
      <div class="sidebar-toggle" @click="toggleSidebar">
        <i class="icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.25 12.2744L19.25 12.2744" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.2998 18.2988L4.2498 12.2748L10.2998 6.24976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </i>
      </div>
    </div>
    <div class="sidebar-body pt-0 data-scrollbar">
      <slot name="profile-card"></slot>
      <div class="sidebar-list">
        <slot></slot>
      </div>
    </div>
    <div class="sidebar-footer"></div>
  </aside>
</template>

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/store/setting/state.js file.

Brush

We have created an object in ./src/store/setting/state.js in that state.setting

setting: {
    app_name: 'Hope UI',
    theme_scheme: 'light',
    theme_scheme_direction: 'ltr',
    theme_color: 'theme-color-default',
    header_navbar: 'default',
    sidebar_color: 'sidebar-white',
    sidebar_type: [],
    sidebar_menu_style: 'navs-rounded-all'
  }

Sidebar Color

For example you have to set sidebar color as dark then you will have to add sidebar-dark class at state.setting.sidebar_color of the ./src/store/setting/state.js

  • For sidebar color as dark
    sidebar_color: 'sidebar-dark',
  • For sidebar color as solid color
    sidebar_color: 'sidebar-color',
  • For sidebar as Transparent
    sidebar_color: 'sidebar-transparent',

Sidebar Types

For example you have to set sidebar type as mini then you will have to add sidebar-mini class at state.setting.sidebar_type of the ./src/store/setting/state.js

  • For sidebar type as mini
    sidebar_type: ['sidebar-mini'],
  • For sidebar type as hover
    sidebar_type: ['sidebar-hover'],
  • For sidebar type as boxed
    sidebar_type: ['sidebar-boxed'],

Sidebar Menu Style

For example you have to set sidebar active as rounded then you will have to add navs-rounded class at state.setting.sidebar_menu_style of the ./src/store/setting/state.js

  • For sidebar active as rounded one side
    sidebar_menu_style: 'navs-rounded',
  • For sidebar active as rounded all
    sidebar_menu_style: 'navs-rounded-all',
  • For sidebar active as one side pill
    sidebar_menu_style: 'navs-pill',
  • For sidebar active as pill all
    sidebar_menu_style: 'navs-pill-all',