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

## sub header 1

<v-col class="cs-dashboard-col pa-0">
  <v-flex shrink class="dashboard-toolbar-flex">
    <!-- <v-toolbar
      :dense="denseToolbar()"
      text
      secondary
      class="dashboard-toolbar"
      v-if="showToolbar()" 
    >
      <v-toolbar-title v-if="!hideTitle()">{{
        $cs.Translate(dashboard.title)
      }}</v-toolbar-title>
            
    </v-toolbar> -->

    <v-toolbar
      v-if="dashboard.options.toolbarOptions"
      :absolute="dashboard.options.toolbarOptions.absolute"
      :prominent="dashboard.options.toolbarOptions.prominent"
      :color="dashboard.options.toolbarOptions.backgroundColor"
      :src="dashboard.options.toolbarOptions.backgroundImage"
      :elevation="dashboard.options.toolbarOptions.elevation"
      :dense="dashboard.options.toolbarOptions.dense"
      :collapse="dashboard.options.toolbarOptions.collapse"
      :flat="dashboard.options.toolbarOptions.flat"
    >
      <v-icon
        v-if="dashboard.options.icon && !dashboard.options.toolbarOptions.hideIcon"
        class="pr-3"
        >{{ dashboard.options.icon }}</v-icon
      >
      <v-toolbar-title
        v-if="!dashboard.options.toolbarOptions || !dashboard.options.toolbarOptions.hideTitle"
        >{{ $cs.Translate(dashboard.title) }}</v-toolbar-title
      >
      <v-spacer></v-spacer>

      <!-- <cs-toolbar-menus
            v-if="!dashboard.options.hideMenu"
            :searchProperty="dashboard.options.searchProperty"
            :menus.sync="dashboard.options.menus"            
          ></cs-toolbar-menus> -->
    </v-toolbar>

    <template
      v-if="dashboard.parent && dashboard.parent.options && dashboard.parent.options.toolbarOptions && dashboard.parent.options.toolbarOptions.navigation && dashboard.parent.options.toolbarOptions.navigation === 'stepper-inline'"
    >
      <v-toolbar
        :absolute="dashboard.parent.options.toolbarOptions.absolute"
        :prominent="dashboard.parent.options.toolbarOptions.prominent"
        :color="dashboard.parent.options.toolbarOptions.backgroundColor"
        :elevation="dashboard.parent.options.toolbarOptions.elevation"
        :dense="dashboard.parent.options.toolbarOptions.dense"
        :collapse="dashboard.parent.options.toolbarOptions.collapse"
        :flat="dashboard.parent.options.toolbarOptions.flat"
      >
        <v-stepper
          :value="selectedStepper"
          class="dashboard-stepper"
          non-linear
        >
          <v-stepper-header>
            <template v-for="(item, index) in dashboard.parent.dashboards">
              <v-stepper-step
                :key="index"
                :step="index + 1"
                editable
                @click="selectStepperDashboard(item)"
                >{{ $cs.Translate(item.title) }} </v-stepper-step
              ><v-divider></v-divider
            ></template>
          </v-stepper-header>
        </v-stepper>
      </v-toolbar>
    </template>

    <template
      v-if="dashboard.parent && dashboard.parent.options && dashboard.parent.options.toolbarOptions && dashboard.parent.options.toolbarOptions.navigation && dashboard.parent.options.toolbarOptions.navigation !== 'stepper-inline'"
    >
      <v-toolbar
        :absolute="dashboard.parent.options.toolbarOptions.absolute"
        :prominent="dashboard.parent.options.toolbarOptions.prominent"
        :color="dashboard.parent.options.toolbarOptions.backgroundColor"
        :elevation="dashboard.parent.options.toolbarOptions.elevation"
        :dense="dashboard.parent.options.toolbarOptions.dense"
        :collapse="dashboard.parent.options.toolbarOptions.collapse"
        :flat="dashboard.parent.options.toolbarOptions.flat"
      >
        <template
          v-if="dashboard.parent.options.toolbarOptions.navigation === 'stepper'"
        >
          <v-stepper
            :value="selectedStepper"
            class="dashboard-stepper"
            non-linear
          >
            <v-stepper-header>
              <template v-for="(item, index) in dashboard.parent.dashboards">
                <v-stepper-step
                  :key="index"
                  :step="index + 1"
                  editable
                  @click="selectStepperDashboard(item)"
                  >{{ $cs.Translate(item.title) }} </v-stepper-step
                ><v-divider></v-divider
              ></template>
            </v-stepper-header>
          </v-stepper>
        </template>
        <template
          v-else-if="dashboard.parent.options.toolbarOptions.navigation=== 'tabs'"
        >
          <v-tabs v-model="selectedTab">
            <v-tab
              v-for="(item, index) in dashboard.parent.dashboards"
              @click="selectStepperDashboard(item)"
              :key="index"
            >
              <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
              {{ $cs.Translate(item.title) }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
    </template>
  </v-flex>

  <v-flex grow class="dashboard-toolbar-flex"
    ><!-- https://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api -->
    <component
      v-show="!dashboard._loading"
      :is="component"
      :dashboard="dashboard"
      :id="'dashboard-' + dashboard.id"
      class="dashboard-content"
      :class="dashboard.options.class"
    ></component>
  </v-flex>
</v-col>