App Switcher

The app switcher is a dashboard element that allows to switch between different apps by opening popover.

Usage

Use the apps prop to define the apps in your AppSwitcher and v-model to automatically keep track of the selected app. Apps can be grouped just by adding new object in apps array with apps list. See example below.

<template>
  <div style="background: #09265F; width: 300px;">
    <ci-app-switcher
      v-model="selectedApp"
      :apps="apps"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedApp: 'Scheduling',
      apps: [
        [
          {
            name: 'Scheduling',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/scheduling-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          },
          {
            name: 'Sales Analytics Long Title',
            description: 'Short desc',
            logo: 'https://cdn.cirrusinsight.com/img/sales-analytics-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          },
          {
            name: 'Cadences',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/cadences-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          }
        ],
        [
          {
            name: 'Dashboard',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/dashboard-cion.svg',
            href: 'https://www.cirrusinsight.com/'
          }
        ]
      ]
    }
  }
}
</script>

Collapsed

Use the collapsed prop to define if the AppSwitcher is used in collapsed Menu. When used removes title and shows only logo and grid icon.

<template>
<div>
  <ci-button @click="collapsed = !collapsed">
      Toggle Collapsed
  </ci-button>
  <br><br>
  <div :style="`width: ${collapsed ? '64px' : '300px'}`">
    <ci-app-switcher
      v-model="selectedApp"
      :apps="apps"
      :collapsed="collapsed"
    />
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      selectedApp: 'Scheduling',
      collapsed: true,
      apps: [
        [
          {
            name: 'Scheduling',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/scheduling-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          },
          {
            name: 'Sales Analytics Long Title',
            description: 'Short desc',
            logo: 'https://cdn.cirrusinsight.com/img/sales-analytics-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          },
          {
            name: 'Cadences',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/cadences-icon.svg',
            href: 'https://www.cirrusinsight.com/'
          }
        ],
        [
          {
            name: 'Dashboard',
            description: 'A short description of this app.',
            logo: 'https://cdn.cirrusinsight.com/img/dashboard-cion.svg',
            href: 'https://www.cirrusinsight.com/'
          }
        ],
      ]
    }
  }
}
</script>

Events

Event	Arguments	Description
@update	The selected app name	Emitted when an app is chosen
@open	-	Emitted when app switcher opens