Header.vue

<script setup lang="ts">
const menuOpen = ref(false)
const drawerOpen = ref(false)

const navLinks = [
  { label: 'Dashboard', icon: 'i-material-symbols-dashboard-outline', to: '#' },
  { label: 'Agents', icon: 'i-material-symbols-smart-toy-outline', to: '#' },
  { label: 'Sessions', icon: 'i-material-symbols-forum-outline', to: '#' },
  { label: 'Traces', icon: 'i-material-symbols-account-tree-outline', to: '#' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic — title + logo slot">
      <div class="w-full overflow-hidden rounded-lg border border-(--ui-border)">
        <UHeader title="ARCP Console" to="#">
          <template #right>
            <UButton
              icon="i-material-symbols-notifications-outline"
              color="neutral"
              variant="ghost"
              size="sm"
            />
            <UButton size="sm" color="primary" icon="i-material-symbols-rocket-launch-outline">
              Deploy
            </UButton>
          </template>
        </UHeader>
      </div>
    </GallerySection>

    <GallerySection title="With center nav links">
      <div class="w-full overflow-hidden rounded-lg border border-(--ui-border)">
        <UHeader title="ARCP" to="#">
          <div class="hidden items-center gap-1 md:flex">
            <UButton
              v-for="link in navLinks"
              :key="link.label"
              :label="link.label"
              :icon="link.icon"
              color="neutral"
              variant="ghost"
              size="sm"
              :to="link.to"
            />
          </div>

          <template #right>
            <UBadge color="success" variant="soft" size="sm">
              <span class="flex items-center gap-1">
                <span class="size-1.5 rounded-full bg-green-500 inline-block" />
                Runtime online
              </span>
            </UBadge>
            <UAvatar
              icon="i-material-symbols-person-outline"
              size="sm"
              color="neutral"
              variant="soft"
            />
          </template>
        </UHeader>
      </div>
    </GallerySection>

    <GallerySection title="With mobile menu (modal mode)">
      <div class="w-full overflow-hidden rounded-lg border border-(--ui-border)">
        <UHeader
          v-model:open="menuOpen"
          title="ARCP Console"
          to="#"
          mode="modal"
          :toggle="true"
          toggle-side="right"
        >
          <template #right>
            <UButton size="sm" color="neutral" variant="outline">
              Docs
            </UButton>
          </template>

          <template #body>
            <nav class="flex flex-col gap-1 p-4">
              <UButton
                v-for="link in navLinks"
                :key="link.label"
                :label="link.label"
                :icon="link.icon"
                color="neutral"
                variant="ghost"
                class="justify-start"
                to="#"
              />
            </nav>
          </template>
        </UHeader>
      </div>
      <p class="text-sm text-(--ui-text-muted)">
        Toggle button appears on the right; opens a modal with mobile nav.
      </p>
    </GallerySection>

    <GallerySection title="Drawer mode (toggle left)">
      <div class="w-full overflow-hidden rounded-lg border border-(--ui-border)">
        <UHeader
          v-model:open="drawerOpen"
          title="Agent Runtime"
          to="#"
          mode="drawer"
          :toggle="true"
          toggle-side="left"
        >
          <template #right>
            <UButton
              icon="i-material-symbols-account-circle-outline"
              color="neutral"
              variant="ghost"
              size="sm"
            />
          </template>

          <template #body>
            <nav class="flex flex-col gap-2 p-4">
              <p class="text-xs font-semibold uppercase text-(--ui-text-muted) px-2 mb-1">Navigation</p>
              <UButton
                v-for="link in navLinks"
                :key="link.label"
                :label="link.label"
                :icon="link.icon"
                color="neutral"
                variant="ghost"
                class="justify-start"
                to="#"
              />
              <USeparator class="my-2" />
              <UButton
                label="Settings"
                icon="i-material-symbols-settings-outline"
                color="neutral"
                variant="ghost"
                class="justify-start"
                to="#"
              />
            </nav>
          </template>
        </UHeader>
      </div>
      <p class="text-sm text-(--ui-text-muted)">
        Toggle button on the left; opens a drawer with sidebar navigation.
      </p>
    </GallerySection>

    <GallerySection title="Custom title slot">
      <div class="w-full overflow-hidden rounded-lg border border-(--ui-border)">
        <UHeader to="#">
          <template #title>
            <div class="flex items-center gap-2">
              <UIcon name="i-material-symbols-hub-outline" class="text-primary size-5" />
              <span class="font-bold tracking-tight">ARCP</span>
              <UBadge label="v2" color="primary" variant="soft" size="xs" />
            </div>
          </template>

          <template #right>
            <UButton
              label="Sign in"
              color="neutral"
              variant="outline"
              size="sm"
              icon="i-material-symbols-login"
            />
            <UButton
              label="Get started"
              color="primary"
              size="sm"
              trailing-icon="i-material-symbols-arrow-forward"
            />
          </template>
        </UHeader>
      </div>
    </GallerySection>
  </div>
</template>