SiteHeader with Breadcrumbs

services/frontend/src/
 ├─ composables/
    └─ useBreadcrumbs.ts     # Shared breadcrumb state management
 ├─ components/
    ├─ SiteHeader.vue        # Header with sidebar trigger + breadcrumbs
    └─ DashboardLayout.vue   # Layout wrapper that includes SiteHeader

interface BreadcrumbItem {
  label: string   // Display text
  href?: string   // Optional link - omit for current page
}

<script setup lang="ts">
import { onMounted } from 'vue'
import { useBreadcrumbs } from '@/composables/useBreadcrumbs'

const { setBreadcrumbs } = useBreadcrumbs()

onMounted(() => {
  setBreadcrumbs([{ label: 'Dashboard' }])
})
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
import { TeamService } from '@/services/teamService'

const route = useRoute()
const { setBreadcrumbs } = useBreadcrumbs()
const team = ref(null)

onMounted(async () => {
  // Initial loading state
  setBreadcrumbs([
    { label: 'Teams', href: '/teams' },
    { label: 'Loading...' }
  ])

  // Fetch and update with actual name
  team.value = await TeamService.getTeam(route.params.id)
  setBreadcrumbs([
    { label: 'Teams', href: '/teams' },
    { label: team.value.name }
  ])
})
</script>

setBreadcrumbs([
  { label: 'MCP Catalog', href: '/admin/mcp-server-catalog' },
  { label: server.name, href: `/admin/mcp-server-catalog/view/${serverId}` },
  { label: 'Edit' }
])

<template>
  <DashboardLayout>
    <!-- Page content -->
  </DashboardLayout>
</template>