@csnext/cs-client/src/components/cs-sidebar/cs-sidebar.html

## sub header 1

<v-navigation-drawer
  :width="sidebarWidth"
  disable-route-watcher
  v-if="sideBar && !sideBar.disabled"
  disable-resize-watcher
  v-model="sideBar.open"
  :right="sideBar.right"
  :mini-variant="sideBar.mini"
  :clipped="sideBar.clipped"
  :permanent="sideBar.permanent"
  :persistent="sideBar.persistent"
  :temporary="sideBar.temporary"
  :floating="sideBar.floating"
  class="cs-nav-drawer"
  :app="true"
>
<v-btn
v-if="sideBar.closeButton"
fab
depressed
small
@click="closeSidebar()"
class="primary sidebar-close-button"
style="position:absolute; top: 10px; right: 10px; z-index: 10"
><v-icon>arrow_forward</v-icon></v-btn
>
  <v-toolbar v-if="sideBar.title">
    <v-list dense>
      <v-list-item>
        <v-icon v-if="app.project.navigation.icons">home</v-icon>
        <v-list-item-title class="title"
          >{{ $cs.Translate(sideBar.title) }}</v-list-item-title
        >
      </v-list-item>
    </v-list>
  </v-toolbar>


  <v-divider v-if="sideBar.title"></v-divider>
  <div v-if="sideBar.component" class="sidebar-component-container">
    <component :is="sideBar.component"></component>
  </div>
  <div v-if="sideBar.dashboard" class="sidebar-dashboard-container">
    <cs-dashboard :dashboard="sideBar.dashboard"></cs-dashboard>
  </div>

  <simplebar
    class="sidebar-simplebar"
    v-else-if="app.project.navigation.style==='left-hierarchy' && !sideBar.right"
  >
    <v-list class="cs-sidebar-list">
      <v-list-group
        v-for="item in app.project.dashboards"
        value="true"
        v-show="!item.hideFromNavigation"
        no-action
        :key="item.title"
        :append-icon="!sideBar.mini && item.dashboards ? undefined : ''"
      >
        <v-list-item slot="activator" class="sidebar-menu-list-item">
          <v-list-item-action>
            <v-menu
              content-class="sidebar"
              v-if=""
              :open-on-hover="!!sideBar.mini && !!item.dashboards"
              :nudge-width="200"
              offset-x
            >
              <template v-slot:activator="{ on }">
                <v-icon v-on="on" @click="SelectDashboard(item)"
                  >{{ item.icon }}</v-icon
                >
              </template>
              <v-card>
                <!-- <v-card-title>{{
                  $cs.Translate(item.title)
                }}</v-card-title>
                <v-divider v-if="item.dashboards"></v-divider> -->
                <v-list>
                  <v-list-item
                    v-for="subItem in item.dashboards"
                    :to="subItem.pathLink"
                    v-show="!subItem.hideFromNavigation"
                    :key="subItem.title"
                  >
                    <!-- @click="SelectDashboard(subItem)" -->
                    <v-list-item-content>
                      <v-list-item-title
                        >{{ $cs.Translate(subItem.title) }}</v-list-item-title
                      >
                    </v-list-item-content>
                    <v-list-item-action>
                      <v-icon>{{ subItem.action }}</v-icon>
                    </v-list-item-action>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-menu>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title @click="SelectDashboard(item)"
              >{{ $cs.Translate(item.title) }}</v-list-item-title
            >
          </v-list-item-content>
        </v-list-item>
        <v-list-item
          v-if="!sideBar.mini"
          v-for="subItem in item.dashboards"
          :to="subItem.pathLink"
          v-show="!subItem.hideFromNavigation"
          :key="subItem.title"
        >
          <!-- @click="SelectDashboard(subItem)" -->
          <v-list-item-content>
            <v-list-item-title
              >{{ $cs.Translate(subItem.title) }}</v-list-item-title
            >
          </v-list-item-content>
          <v-list-item-action>
            <v-icon>{{ subItem.action }}</v-icon>
          </v-list-item-action>
        </v-list-item>
      </v-list-group>
    </v-list>
  </simplebar>

  <div v-if="sideBar.canPin" class="leftsidebar-pin">
    <v-btn small icon @click="sideBar.temporary=!sideBar.temporary">
      <v-icon small v-if="sideBar.temporary">lock_open</v-icon>
      <v-icon small v-if="!sideBar.temporary">lock_outline</v-icon>
    </v-btn>
  </div>

  <template v-slot:append>
    <v-tooltip bottom v-if="sideBar.footer" content-class="tooltip-multiline">
      <template v-slot:activator="{ on }">
        <div class="navbar-footer" v-on="on">
          <span class="navbar-footer-icon">
            <v-icon small v-if="sideBar.footer.icon"
              >{{ sideBar.footer.icon }}</v-icon
            >
          </span>
          <span class="navbar-footer-text" v-if="sideBar.footer.title"
            >{{ $cs.Translate(sideBar.footer.title) }}</span
          >
        </div>
      </template>
      <span v-html="sideBar.footer.tooltip || sideBar.footer.title"></span>
    </v-tooltip>
  </template>
  <div v-if="sideBar.canMinify" class="leftsidebar-minify">
    <v-btn small icon @click="toggleMini()">
      <v-icon small v-if="sideBar.mini">keyboard_arrow_right</v-icon>
      <v-icon small v-if="!sideBar.mini">keyboard_arrow_left</v-icon>
    </v-btn>
  </div>
</v-navigation-drawer>