Tab MenuCommunity Asset

<script setup lang="ts">
import type { TabMenuItem } from '@/components/TabMenu.vue'

const route = useRoute()
const items = computed(
  () =>
    [
      {
        id: 'overview',
        label: 'Overview',
        to: '#',
        isActive: !route.hash || route.hash === '#',
      },
      {
        id: 'provet-cloud',
        label: 'Provet Cloud',
        to: '#provet-cloud',
        isActive: route.hash === '#provet-cloud',
      },
      {
        id: 'nordhealth',
        label: 'Nord Design System',
        to: '#nordhealth',
        target: '_blank',
      },
    ] satisfies TabMenuItem[],
)
</script>

<template>
  <TabMenu :items />
</template>

<script setup lang="ts">
import type { TabMenuItem } from '@/components/TabMenu.vue'

const activeTab = ref('dashboard')

const handleTabClick = (tabId: string) => {
  activeTab.value = tabId
}

const items = computed(
  () =>
    [
      {
        id: 'dashboard',
        label: 'Dashboard',
        isActive: activeTab.value === 'dashboard',
        clickHandler: () => handleTabClick('dashboard'),
      },
      {
        id: 'notifications',
        label: `Notifications`,
        isActive: activeTab.value === 'notifications',
        clickHandler: () => handleTabClick('notifications'),
      },
      {
        id: 'settings',
        label: 'Settings',
        isActive: activeTab.value === 'settings',
        clickHandler: () => handleTabClick('settings'),
      },
      {
        id: 'logout',
        label: 'Logout',
        isActive: activeTab.value === 'logout',
        clickHandler: () => handleTabClick('logout'),
      },
    ] satisfies TabMenuItem[],
)
</script>

<template>
  <div class="n-stack">
    <TabMenu :items />

    <div class="n-padding-m">
      <p><strong>Active Tab:</strong> {{ activeTab || 'None' }}</p>
      <p class="n-color-text-weak">
        Click on the tabs above to see the click events in action.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TabMenuItem } from '@/components/TabMenu.vue'

const items = ref([
  {
    id: 'local-page',
    label: 'Local Page',
    to: '#',
  },
  {
    id: 'provet-cloud',
    label: 'Provet Cloud (External)',
    to: 'https://www.provet.cloud/',
    external: true,
  },
  {
    id: 'nord-design-system',
    label: 'Nord Design System (External)',
    to: 'https://nordhealth.design/',
    external: true,
  },
  {
    id: 'provet-support',
    label: 'Support Portal (External and Target Blank)',
    to: 'https://support.provet.cloud/',
    external: true,
    target: '_blank',
  },
] satisfies TabMenuItem[])
</script>

<template>
  <TabMenu :items />
</template>

<script setup lang="ts">
import type { TabMenuItem } from '@/components/TabMenu.vue'

const items = ref([
  {
    id: 'same-tab',
    label: 'Same Tab',
    to: '#',
  },
  {
    id: 'new-tab-provet',
    label: 'Provet Cloud (New Tab)',
    to: 'https://www.provet.cloud/',
    external: true,
    target: '_blank',
  },
  {
    id: 'new-tab-nord',
    label: 'Nord Design (New Tab)',
    to: 'https://nordhealth.design/',
    external: true,
    target: '_blank',
  },
  {
    id: 'new-tab-docs',
    label: 'Documentation (New Tab)',
    to: 'https://docs.provet.cloud/',
    external: true,
    target: '_blank',
  },
] satisfies TabMenuItem[])
</script>

<template>
  <TabMenu :items />
</template>