Sidebar.vue

<script setup lang="ts">
import { ref } from 'vue'

const openOffcanvas = ref(true)
const openIcon = ref(true)
const openNone = ref(true)

const navItems = [
  { label: 'Jobs', icon: 'i-material-symbols-work-outline', badge: { label: '12', color: 'primary' as const, variant: 'soft' as const } },
  { label: 'Agents', icon: 'i-material-symbols-smart-toy-outline' },
  { label: 'Sessions', icon: 'i-material-symbols-terminal-outline' },
  { label: 'Runtimes', icon: 'i-material-symbols-memory-outline' },
  { label: 'Traces', icon: 'i-material-symbols-timeline-outline' },
  { label: 'Events', icon: 'i-material-symbols-event-note-outline', badge: { label: '3', color: 'warning' as const, variant: 'soft' as const } },
]

const footerItems = [
  { label: 'Settings', icon: 'i-material-symbols-settings-outline' },
  { label: 'Help', icon: 'i-material-symbols-help-outline' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <!-- Collapsible: offcanvas (default) -->
    <GallerySection title="Collapsible: offcanvas (default)">
      <div class="w-full overflow-hidden rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)]" style="height: 340px; display: flex; position: relative;">
        <USidebar
          v-model:open="openOffcanvas"
          collapsible="offcanvas"
          title="ARCP Console"
          description="Agent Runtime Control"
          :close="true"
          style="position: relative;"
        >
          <div class="flex flex-col gap-1 p-2">
            <UButton
              v-for="item in navItems"
              :key="item.label"
              :icon="item.icon"
              variant="ghost"
              color="neutral"
              size="sm"
              class="justify-start w-full"
            >
              <span class="flex-1 text-left">{{ item.label }}</span>
              <UBadge
                v-if="item.badge"
                :color="item.badge.color"
                :variant="item.badge.variant"
                :label="item.badge.label"
                size="xs"
              />
            </UButton>
          </div>

          <template #footer>
            <div class="flex items-center gap-2 p-3 border-t border-[var(--ui-border)]">
              <UAvatar icon="i-material-symbols-person-outline" size="xs" color="neutral" variant="soft" />
              <span class="text-xs text-[var(--ui-text-muted)] truncate">agent@arcp.io</span>
            </div>
          </template>
        </USidebar>

        <div class="flex flex-1 flex-col gap-3 p-5 overflow-auto">
          <UButton
            :icon="openOffcanvas ? 'i-material-symbols-menu-open' : 'i-material-symbols-menu'"
            variant="ghost"
            color="neutral"
            size="sm"
            class="self-start"
            @click="openOffcanvas = !openOffcanvas"
          >
            {{ openOffcanvas ? 'Close sidebar' : 'Open sidebar' }}
          </UButton>
          <UAlert
            color="info"
            variant="soft"
            title="Job j-9f3a running"
            description="Agent session active — lease valid for 42 s."
            icon="i-material-symbols-pending-outline"
          />
          <UAlert
            color="success"
            variant="soft"
            title="Job j-7c2b completed"
            description="Runtime processed 840 events in 1.9 s."
            icon="i-material-symbols-check-circle-outline"
          />
        </div>
      </div>
    </GallerySection>

    <!-- Collapsible: icon -->
    <GallerySection title="Collapsible: icon (shrinks to icon-only)">
      <div class="w-full overflow-hidden rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)]" style="height: 340px; display: flex; position: relative;">
        <USidebar
          v-model:open="openIcon"
          collapsible="icon"
          :rail="true"
          style="position: relative;"
        >
          <template #default="{ state }">
            <div class="flex flex-col gap-1 p-2">
              <UButton
                v-for="item in navItems"
                :key="item.label"
                :icon="item.icon"
                variant="ghost"
                color="neutral"
                size="sm"
                :class="state === 'collapsed' ? 'justify-center' : 'justify-start w-full'"
              >
                <span v-if="state === 'expanded'" class="flex-1 text-left">{{ item.label }}</span>
              </UButton>
            </div>
          </template>

          <template #footer="{ state }">
            <div
              class="flex items-center gap-2 p-3 border-t border-[var(--ui-border)]"
              :class="state === 'collapsed' ? 'justify-center' : ''"
            >
              <UAvatar icon="i-material-symbols-person-outline" size="xs" color="neutral" variant="soft" />
              <span v-if="state === 'expanded'" class="text-xs text-[var(--ui-text-muted)] truncate">agent@arcp.io</span>
            </div>
          </template>
        </USidebar>

        <div class="flex flex-1 flex-col gap-3 p-5 overflow-auto">
          <UButton
            :icon="openIcon ? 'i-material-symbols-menu-open' : 'i-material-symbols-menu'"
            variant="ghost"
            color="neutral"
            size="sm"
            class="self-start"
            @click="openIcon = !openIcon"
          >
            {{ openIcon ? 'Collapse' : 'Expand' }}
          </UButton>
          <p class="text-sm text-[var(--ui-text-muted)]">
            Click the rail handle or button to toggle icon-only mode. Navigation labels hide when collapsed.
          </p>
          <UBadge color="primary" variant="soft" icon="i-material-symbols-bolt">
            3 runtimes active
          </UBadge>
        </div>
      </div>
    </GallerySection>

    <!-- Collapsible: none (always visible) -->
    <GallerySection title="Collapsible: none (always visible)">
      <div class="w-full overflow-hidden rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)]" style="height: 300px; display: flex; position: relative;">
        <USidebar
          collapsible="none"
          title="Control Plane"
          style="position: relative; width: 200px; flex-shrink: 0;"
        >
          <div class="flex flex-col gap-1 p-2">
            <UButton
              v-for="item in navItems.slice(0, 4)"
              :key="item.label"
              :icon="item.icon"
              variant="ghost"
              color="neutral"
              size="sm"
              class="justify-start w-full"
            >
              {{ item.label }}
            </UButton>
          </div>
        </USidebar>

        <div class="flex flex-1 flex-col gap-3 p-5 overflow-auto">
          <p class="text-sm text-[var(--ui-text-muted)]">
            Non-collapsible sidebar — always rendered inline with no toggle.
          </p>
          <div class="flex flex-col gap-2">
            <div v-for="item in footerItems" :key="item.label" class="flex items-center gap-2 text-sm text-[var(--ui-text-muted)]">
              <UIcon :name="item.icon" class="h-4 w-4" />
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </GallerySection>

    <!-- Right-side sidebar -->
    <GallerySection title="Side: right">
      <div class="w-full overflow-hidden rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)]" style="height: 280px; display: flex; position: relative;">
        <div class="flex flex-1 flex-col gap-3 p-5 overflow-auto">
          <p class="text-sm font-medium text-[var(--ui-text)]">Job trace viewer</p>
          <div class="flex flex-col gap-2">
            <div v-for="(span, i) in [
              { name: 'session.start', dur: '12ms', color: 'primary' },
              { name: 'lease.acquire', dur: '3ms', color: 'info' },
              { name: 'agent.execute', dur: '840ms', color: 'success' },
              { name: 'runtime.flush', dur: '8ms', color: 'neutral' },
            ]" :key="i" class="flex items-center gap-3 text-xs">
              <UBadge :color="span.color" variant="soft" size="xs">{{ span.name }}</UBadge>
              <span class="text-[var(--ui-text-muted)]">{{ span.dur }}</span>
            </div>
          </div>
        </div>

        <USidebar
          collapsible="none"
          side="right"
          title="Details"
          style="position: relative; width: 180px; flex-shrink: 0; border-left: 1px solid var(--ui-border);"
        >
          <div class="flex flex-col gap-2 p-3 text-xs">
            <div class="flex flex-col gap-1">
              <span class="text-[var(--ui-text-muted)] uppercase tracking-wide text-[10px]">Job ID</span>
              <span class="font-mono text-[var(--ui-text)]">j-9f3a2c</span>
            </div>
            <div class="flex flex-col gap-1">
              <span class="text-[var(--ui-text-muted)] uppercase tracking-wide text-[10px]">Status</span>
              <UBadge color="success" variant="soft" size="xs">completed</UBadge>
            </div>
            <div class="flex flex-col gap-1">
              <span class="text-[var(--ui-text-muted)] uppercase tracking-wide text-[10px]">Runtime</span>
              <span class="text-[var(--ui-text)]">arcp-v2</span>
            </div>
            <div class="flex flex-col gap-1">
              <span class="text-[var(--ui-text-muted)] uppercase tracking-wide text-[10px]">Duration</span>
              <span class="text-[var(--ui-text)]">863ms</span>
            </div>
          </div>
        </USidebar>
      </div>
    </GallerySection>

    <!-- With close button prop -->
    <GallerySection title="With close button + actions slot">
      <div class="w-full overflow-hidden rounded-lg border border-[var(--ui-border)] bg-[var(--ui-bg)]" style="height: 280px; display: flex; position: relative;">
        <USidebar
          collapsible="offcanvas"
          title="Agent Sessions"
          description="Active leases"
          :close="{ color: 'neutral', variant: 'ghost', size: 'xs' }"
          close-icon="i-material-symbols-close"
          style="position: relative;"
        >
          <template #actions>
            <UButton icon="i-material-symbols-add" color="primary" variant="ghost" size="xs" />
          </template>

          <div class="flex flex-col gap-2 p-3">
            <div v-for="session in [
              { id: 'sess-a1', agent: 'agent-v2', lease: '58s', status: 'success' },
              { id: 'sess-b3', agent: 'agent-v2', lease: '12s', status: 'warning' },
              { id: 'sess-c7', agent: 'agent-v1', lease: 'expired', status: 'error' },
            ]" :key="session.id" class="flex items-center gap-2 rounded-md p-2 hover:bg-[var(--ui-bg-elevated)] text-xs">
              <UIcon name="i-material-symbols-terminal-outline" :class="`text-${session.status} h-4 w-4 shrink-0`" />
              <div class="flex-1 min-w-0">
                <p class="font-medium text-[var(--ui-text)] truncate">{{ session.id }}</p>
                <p class="text-[var(--ui-text-muted)] truncate">{{ session.agent }} · {{ session.lease }}</p>
              </div>
              <UBadge :color="session.status" variant="soft" size="xs">{{ session.lease === 'expired' ? 'expired' : 'active' }}</UBadge>
            </div>
          </div>
        </USidebar>

        <div class="flex flex-1 flex-col gap-3 p-5 overflow-auto">
          <p class="text-sm text-[var(--ui-text-muted)]">
            Sidebar with a styled close button and an actions slot button. Use the X to dismiss on desktop.
          </p>
        </div>
      </div>
    </GallerySection>
  </div>
</template>