App

The App component serves as the container component for every dashboard application. It provides APIs for overlays such as Blade and Sheet, and organizes the primary and secondary navigation into the proper layout.

If the CiDashboard component is mounted within this component, a warning will be issued.

Usage

The App component provides slots for primary navigation, secondary navigation, and content.

<template>
  <ci-app>
    <template #primary-nav>
      <ci-primary-navigation>
        <ci-primary-navigation-item
          v-for="item in primaryNavigation"
          :key="item.id"
          :icon="item.icon"
          :active="item.active"
          :tooltip-text="item.tooltipText"
          @click="activatePrimaryItem(item.id)"
        />
      </ci-primary-navigation>
    </template>
    <template #secondary-nav>
      <ci-secondary-navigation
        :title="secondaryNavigation.title" 
        :items="secondaryNavigation.items"
      />
    </template>
    <template #content>
      <component 
        v-if="currentContentComponent"
        :is="currentContentComponent"
      />
    </template>
  </ci-app>
</template>

<script>
import AppDemoSheetPlayground from './AppDemoSheetPlayground.vue'
import AppDemoBladePlayground from './AppDemoBladePlayground.vue'

export default {
  data() {
    const ref = this;
    return {
      activeItem: '',
      primaryNavigation: [
        {
          id: 'home',
          icon: 'home',
          tooltipText: 'Home',
          active: false,
          secondaryNavigation: {
            title: 'Home',
            items: [
              { id: 'sheetDemo', text: 'Sheet Demo', onClick: function() { ref.activateSecondaryItem('sheetDemo') }, active: false },
              { id: 'bladeDemo', text: 'Blade Demo', onClick: function() { ref.activateSecondaryItem('bladeDemo') }, active: false },
            ],
          },
        },
         {
          id: 'calendar',
          icon: 'calendar',
          tooltipText: 'Calendar',
          active: false,
          secondaryNavigation: {
            title: 'Calendar',
            items: [
              { id: 'prep', text: 'Meeting Prep', onClick: function() { ref.activateSecondaryItem('prep') }, active: false },
              { id: 'settings', text: 'Settings', onClick: function() { ref.activateSecondaryItem('settings') }, active: false },
            ],
          },
        },
      ],
      secondaryNavigation: {
        title: '',
        items: []
      },
      contentComponentIndex: {
        sheetDemo: AppDemoSheetPlayground,
        bladeDemo: AppDemoBladePlayground
      },
      currentContentComponent: null,
    }
  },
  methods: {
    activatePrimaryItem(itemId) {
      if (this.activeItem.id !== itemId) {
        if (this.activeItem) this.activeItem.active = false
        const newActiveItem = this.primaryNavigation.find(item => item.id === itemId)
        this.activeItem = newActiveItem;
        newActiveItem.active = true;

        this.secondaryNavigation = newActiveItem.secondaryNavigation
        this.activateSecondaryItem(this.secondaryNavigation.items[0].id)
      }
    },
    activateSecondaryItem (id) {
      console.log(id)
      this.activeItem.secondaryNavigation.items.forEach(item => {
        item.id === id ? item.active = true : item.active = false
      });

      const contentComponent = this.contentComponentIndex[id]
      if (contentComponent) {
        this.currentContentComponent = contentComponent
      } else {
        this.currentContentComponent = null
      }
    }
  },
  mounted() {
    this.activatePrimaryItem('home')
  }
}
</script>

Slots

Slot	Description
primary-nav	Used for primary navigation content. For example, you can insert the CiPrimaryNavigation component into this slot to display the main navigation menu.
secondary-nav	Used for secondary navigation content. For instance, you can place the CiSecondaryNavigation component here to show additional navigation options.
content	Used to render custom content. This could be any content you want to display.